Integration of flow.js, React, and AngularJS 1.8
- or -
Post a project like this1288
$75
- Posted:
- Proposals: 3
- Remote
- #3010038
- Awarded
Description
Experience Level: Entry
Estimated project duration: less than 1 week
Flow.js (https://github.com/flowjs/flow.js/) is a JS library for multi-chunk file upload.
They have a demo page of using Flow.js file upload in classic AngularJS 1.3 (http://flowjs.github.io/ng-flow/).
I need a working POC page to be built in React with the same functionality as the Basic Upload section in that demo page:
- a button to upload multiple files
- a button to upload a folder
- drag and drop files to upload
- individual progress bar and a cancel button for each uploaded file
- showing total size
- no need to have buttons for Resume All, Pause All, Cancel All
- no need fancy CSS, focus on functionality
Spec part 1:
1. those functionalities need to be coded in React, and Flow.js, latest version
2. preferably built as a modular component(s)
3. strongly preferred using React Hook concept
4. using Redux is possible if it is a must, but need to explain why
5. code must be well written, efficient, using best practice and commented for easy learning purpose
6. the upload must use chunk upload and must work up to 2GB single file size
Spec part 2:
1. I need a simple React page that is embedding the React component in part 1 to test that it is working. For this to work, please provide also a simple server side code in PHP to handle the chunk upload.
2. I need another simple page built in classic AngularJS v1.8.2 that is embedding the React component in part 1
3. The React component should be able to receive props from the React side (React page) and AngularJS side (AngularJS page) to control the following behavior:
- allow only file upload or folder upload or both
- the API endpoint to upload the file
- a callback to be called before uploading every chunk, with data of the file name and the chunk. The Flow chunk upload must wait until this callback is done before able to upload, by way of this callback will call the Flow callback after done, e.g. chunk.preprocessFinished() or chunk.event('error').
4. The React component should be able to notify the React page and AngularJS page side (either via event or callback prop) when:
- after upload of each file is done, with data of the file name
- after all the uploads are done, with data of list of uploaded files/folder
- after all or some uploads are failed, with data of list of successful uploads and failed uploads
Deliverables:
- the source code
- instructions so that I can set up and run it on my machine
Why do I need this?
I am a software engineer, I have an existing web app written in classic AngularJS 1.8.2 with Flow.js.
We need to rewrite the web app to React but we will convert it part by part, starting with the file upload functionality.
So, I need a POC (for myself to learn) to make the new file uploader (written in React) can work embedded inside AngularJS 1.8.2 host app.
They have a demo page of using Flow.js file upload in classic AngularJS 1.3 (http://flowjs.github.io/ng-flow/).
I need a working POC page to be built in React with the same functionality as the Basic Upload section in that demo page:
- a button to upload multiple files
- a button to upload a folder
- drag and drop files to upload
- individual progress bar and a cancel button for each uploaded file
- showing total size
- no need to have buttons for Resume All, Pause All, Cancel All
- no need fancy CSS, focus on functionality
Spec part 1:
1. those functionalities need to be coded in React, and Flow.js, latest version
2. preferably built as a modular component(s)
3. strongly preferred using React Hook concept
4. using Redux is possible if it is a must, but need to explain why
5. code must be well written, efficient, using best practice and commented for easy learning purpose
6. the upload must use chunk upload and must work up to 2GB single file size
Spec part 2:
1. I need a simple React page that is embedding the React component in part 1 to test that it is working. For this to work, please provide also a simple server side code in PHP to handle the chunk upload.
2. I need another simple page built in classic AngularJS v1.8.2 that is embedding the React component in part 1
3. The React component should be able to receive props from the React side (React page) and AngularJS side (AngularJS page) to control the following behavior:
- allow only file upload or folder upload or both
- the API endpoint to upload the file
- a callback to be called before uploading every chunk, with data of the file name and the chunk. The Flow chunk upload must wait until this callback is done before able to upload, by way of this callback will call the Flow callback after done, e.g. chunk.preprocessFinished() or chunk.event('error').
4. The React component should be able to notify the React page and AngularJS page side (either via event or callback prop) when:
- after upload of each file is done, with data of the file name
- after all the uploads are done, with data of list of uploaded files/folder
- after all or some uploads are failed, with data of list of successful uploads and failed uploads
Deliverables:
- the source code
- instructions so that I can set up and run it on my machine
Why do I need this?
I am a software engineer, I have an existing web app written in classic AngularJS 1.8.2 with Flow.js.
We need to rewrite the web app to React but we will convert it part by part, starting with the file upload functionality.
So, I need a POC (for myself to learn) to make the new file uploader (written in React) can work embedded inside AngularJS 1.8.2 host app.
Elfan N.
0% (0)Projects Completed
-
Freelancers worked with
-
Projects awarded
100%
Last project
5 May 2024
Singapore
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies