As far as I remember, I've never liked implementing file uploads. It requires a lot of work and it's tricky. Progress bars, different devices / browsers, generating thumbnails etc. One day I decided I'll do it as a service, so I can use it easily on all of my projects

What it does

Upload widget with very simple installation. It uploads files directly into the cloud (AWS S3, FTP, Google Drive, Dropbox). It has a lot of features built in, such as:

  • drag & drop, multiple file upload, paste from clipboard
  • automatic backups to another cloud (your files are uploaded into the two different clouds simultaneously)
  • automatic compression that saves space in your cloud
  • automatic file encryption
  • CSS customization
  • comments
  • logs
  • thumbnails for file formats like .pdf, .pps, .doc, .html, .psd, .cdr, .mp4 and over 100+ more

And it's all available in the tiny upload widget, that you can install with one API request.

How I built it

Using PHP (Symfony), with Angular on the front (Admin area), and ReactJS (Widget rea). There are also workers for all the background stuff like converting files, moving, copying etc. Client side code is running on Google Cloud frontend, backend services are running on Docker.

Challenges I ran into

The biggest challenge is that there are a lot of features built in in such a small service. Changing anything I have to remember that it can affect all the other things.

Accomplishments that I'm proud of

I've build a service that I'm using myself for all of my projects. I also have some users, that I know it helped them implementing file uploads on their web apps.

What I learned

I've learn a lot about converting file types, generating thumbnails. I've learned Angular and ReactJS, different cloud integrations. I also learned more about iframes and communication between them, and a lot of potential issues of implementing file uploading.

What's next for PlaneUpload

I will be focusing currently on client side API's, so the widget maintaining will be simpler from the client side.

Share this project: