Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 74020

Unable to add or remove image from multiple html input field

$
0
0

i use https://github.com/promosis/file-upload-with-preview to display preview for multiple image

var upload = new FileUploadWithPreview('myUniqueUploadId', {
  maxFileCount: 4,
  text: {
    chooseFile: 'Maximum 4 Images Allowed',
    browse: 'Add More Images',
    selectedCount: 'Files Added',
  },
});
.custom-file-container {
  max-width: 400px;
  margin: 0 auto;
}
<link href="https://unpkg.com/file-upload-with-preview@4.0.2/dist/file-upload-with-preview.min.css" rel="stylesheet"/><script src="https://unpkg.com/file-upload-with-preview@4.0.8/dist/file-upload-with-preview.min.js"></script><form action="save.php" method="post" enctype="multipart/form-data"><div class="custom-file-container" data-upload-id="myUniqueUploadId"><label>Upload File <a href="javascript:void(0)" class="custom-file-container__image-clear" title="Clear Image">&times;</a></label><label class="custom-file-container__custom-file"><input type="file" name="files[]" class="custom-file-container__custom-file__custom-file-input" accept="image/*" multiple aria-label="Choose File"><input type="hidden" name="MAX_FILE_SIZE" value="10485760" /><span class="custom-file-container__custom-file__custom-file-control"></span></label><div class="custom-file-container__image-preview" style="overflow: auto!important"></div></div><input type="submit" value="Upload Image" name="submit"></form>

it works fine, but i can't add a extra image are remove image.

Adding

i added 3 images to input, i get 3 images in preview without submitting form i added 1 image now i get 4 images in preview, When i submit the form i get only 1 image upload(recently added file).

Removing

it happens same in removing image added 4 images and removed 1 image when i upload all 4 images are uploaded, everything happen only on preview but noting happen in <input>

----Is there any other better way to do(other codes or library) But i want to use my custom upload handler.


Viewing all articles
Browse latest Browse all 74020

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>