File upload page (PHP/jQuery/Ajax)

This project was successfully completed by dustafo for $175 USD in 2 days.

Get free quotes for a project like this
Project Budget
$30 - $250 USD
Completed In
2 days
Total Bids
Project Description

*********** Very important: Please do not bid if you don't think you can complete this project. If the page isn't done 100% perfectly you will NOT be paid for any of the work done regardless of how long you've spent on it. The page MUST feet our needs ***********

You can use any script you want if you have one but my preference is coding from scratch so you and I have much more flexibility in what can and cannot be done.

Please read all this VERY carefully before bidding. If anything below cannot be done, mention it in the bid. Project success will be measured on all these criteria and on usability / stability. Think like a user!

1. The page must allow uploads of multiple files (select multiple files in the file selection dialog).

2. Check file type before upload begins (only allow MP3, MP4, M4A, WMV, AVI, MOV, MPEG file types for now)

3. The page must be responsive (CSS, based on % as much as possible rather than fixed pixel values) with clean CSS (no HTML tables).

4. Must offer support for all major desktop browsers (Chrome, IE, Firefox, Safari, Opera) with graceful fallback so newer browsers have the latest functionality but older browsers do still work too. Check with me before removing anything except drag-and-drop and progress bar from fallback version.

5. If a user goes to another page, they must be able to return to this page and see files they've uploaded. Write uploaded files to a database for this. Previously uploaded files and newly uploaded files must go in the same display box.

6. Keep javascript alert popups to a minimum. If the user uploads multiple files that are unsupported, for example, only one popup showing filenames that were unsupported.

7. No page refreshes! Everything must function well within the same page without a reload that's visible to the user. Use the ".html" method to replace the html in the div box if you'd like, but the user must not see the page reloading entirely.

8. Each "row" in the box must show the file name, file size (in MB), file duration (in minutes), upload progress (bar and %, a check mark after upload completes instead of the %), an "options" section with 3 check boxes, cost of options / extras, and total cost (base + extras).

9. At the end of the upload box, display the total price of all extras selected above and then below it display the total cost (base + extras)

10. At the bottom of the upload box there must be 3 check boxes to select / unselect each of the 3 check boxes in each row. The first box should select / unselect all Option1 check boxes, etc. The check box must reflect the state of the check boxes above (Toggle between "Select All option1" and "Unselect All option1" properly). We must be able to clearly identify which files have which options selected.

11. No bugs! Please do very thorough bug testing and we will too.

12. Files uploaded must be renamed to [url removed, login to view] and the sessionID must be saved in the database.

13. The price of the options on each row depends on the length of the file (duration in minutes). Calculation of cost must be correct this way and easily customizable. For instance, option 1 will cost (file duration) * [url removed, login to view], option 2 will cost (file duration) * [url removed, login to view], and option 3 will cost (file duration) * 0.25. This must be done using clear variables that I can set.

14. Please use meaningful variable names and add comments so I can quickly understand the code in case I need to modify it in the future.

Please, please use as much server-side scripting as possible. I really don't want to rely on things being done on the client site (too buggy, too unreliable, too easy to exploit). Do the least amount possible using jQuery / Ajax and the most amount possible using PHP / MySQL.

Please do proper file checking. with file uploads come potential hacks and I need to make sure we're as safe as possible.

If you have any questions please ask. I'll be glad to discuss this project in even more detail.

Completed by:
Skills Required

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online