HOWTO: a simple website with upload files option and other not so simple solutions

There are two ways to do this: the easy one and the professional. At the end, I took the easy one from the classic w3schools, w3schools php file upload. A la nocode,

  1. Copy the code from the w3schools and save it on your /var/www/html/ as upload.php and indext.html.
  2. Edit the $target_dir = "uploads/";, so that it points to a directory the web user can write
  3. Restart systemctl restart httpd and test.

One note about checking file_uploads = On on CentOS 7.X. I had it on by default, but I didn’t know where was my php.ini. Solution: it’s on /etc/. Here is my dump of the concept:

## > grep 'upload' php.ini
; Whether to allow HTTP file uploads.
; http://php.net/file-uploads
file_uploads = On
; Temporary directory for HTTP uploaded files (will use system default if not
; http://php.net/upload-tmp-dir
;upload_tmp_dir =
; Maximum allowed size for uploaded files.
; http://php.net/upload-max-filesize
upload_max_filesize = 2M
; Maximum number of files that can be uploaded via a single request
max_file_uploads = 20
; Enable upload progress tracking in $_SESSION
; http://php.net/session.upload-progress.enabled
;session.upload_progress.enabled = On
; (i.e. upload completed).
; http://php.net/session.upload-progress.cleanup
;session.upload_progress.cleanup = On
; A prefix used for the upload progress key in $_SESSION
; Default Value: "upload_progress_"
; Development Value: "upload_progress_"
; Production Value: "upload_progress_"
; http://php.net/session.upload-progress.prefix
;session.upload_progress.prefix = "upload_progress_"
; containing the upload progress information
; http://php.net/session.upload-progress.name
;session.upload_progress.name = "PHP_SESSION_UPLOAD_PROGRESS"
; How frequently the upload progress should be updated.
; http://php.net/session.upload-progress.freq
;session.upload_progress.freq =  "1%"
; http://php.net/session.upload-progress.min-freq
;session.upload_progress.min_freq = "1"

You may need to change a lot of values on this file. Don’t forget to systemctl restart httpd when you are done with the changes.

Now that we have a working solution with php + html we can try another languages.

If you know Javascript, maybe this is for you.There’s Vanilla Javascript code to implement a drag-and-drop web. Does it work? Actually yes, you can grab the code form codepen and save it right away. The problem? You need a cloudinary account to have it working.

You can think about some fancy CSS-based solution. The css-tricks web has an interesting and clean drag-n-drop solution. I open the example at the end, right click to View Page Source and copy everything there to my web server. The problem? I don’t seem to manage to configure the final path for the saving of the files. Maybe you can?

On Hackito Ergo Sum they let you download a Java applet. Unfortunately the installation instructions are kind of dark, and after an unzip and start the jetty server I don’t manage to get the promised web working. And their 30 minutes of test are gone.

Can we do the same, maybe, with python? Yes of course! Here you have a working github solution. Do I want this? No, precisely because I don’t want to take care of an additional python process. But it deserves to be mentioned here, right?

I found a lot of React solutions. Here you have a working React Drag and Drop file uploader. Actually this solution (and the explanation) almost convinced me. You can find here quite some codesandbox working examples. But again, I’m sorry but it’s a killer for my problem.

As you know, I’m not a web developer but a simple “provider” of solutions, and my particular setup will be fine with the php + html code. The rest of the solutions, I’ll leave as an exercises to the reader 😉❤️.

1 thought on “HOWTO: a simple website with upload files option and other not so simple solutions

  1. Pingback: HOWTO : two github solutions for drag-and-drop file upload webs | Bits and Dragons

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s