How should I update forms with uploaded files?

createArticle.html

<input type="text" name=title>  <input type="text" name=body>  ...    <div id="file1" onclick="clickInput1();"> Click here to upload 1 </div>  <div id="file1" onclick="clickInput2();"> Click here to upload 2 </div>  <div id="file1" onclick="clickInput3();"> Click here to upload 3 </div>    ...    <input type="file" name="files0[]" id="input1"  onchange="createPreview(...)" hidden>  <input type="file" name="files0[]" id="input2"  onchange="createPreview(...)" hidden>  <input type="file" name="files0[]" id="input3"  onchange="createPreview(...)" hidden>    ...    <img id="previewFile1">  <img id="previewFile2">  <img id="previewFile3">    <button type="submit">Submit</button>  

I'm trying to make an article page with three image uploads. However, I'm having problems when I am updating / deleting uploaded files. The uploaded files' paths are stored in DB as a stringified JSON format that would look something like this :

files0:['/tmp/a.png','/tmp/b.png',''] // if it has two files.  

When updating, my controller(php) will call article's previous file paths and overwrite the empty values in $_FILES.

uploadArticle.php

array(3) {    ["files0"]=>    array(5) {      ["name"]=>      array(3) {        [0]=>        string(20) "a.png"        [1]=>        string(20) "b.png"        [2]=>        string(0) ""  // <-- insert previous image path[2] if it exists.      }     ...    }  }  

While I can upload and update new images, I realized I cannot delete an existing image since the empty values will be replaced by existing values. While I don't want empty images to simple overwrite existing images, but I should also be able to remove images.

What would the easy way to freely edit uploaded images while preserving old images until they are overwritten/deleted specifically by the user?

I'm currently using mysql and php without any frameworks.

https://stackoverflow.com/questions/66880354/how-should-i-update-forms-with-uploaded-files March 31, 2021 at 09:13AM