If multiple images are uploaded one at a time only the last image you upload will show up in Request.Files.

Upload a three images by selecting them individually. You will see the previews in the preview window.

When you check Request.Files it will only have the last image you uploaded not the previous two.

During the use of this module, I required at least two additional features:

• one is CSS class when image is loaded and the preview gets active
• another one is an API to manually trigger image browser

So in this PR, I try to implement two things myself at my convenient.

Test was passed with no problem!

I have found bug probably. Case 1:

• add 3 files one by one in multiple file input
• delete 2 of them
• save form
• expected results: 1 record in database. Test passed

Case 2:

• add 3 files at the same time (using crtrl/cmnd button) in multiple file input
• delete 2 of them
• save form
• expected results: 1 record in database. Actual: 3 records. Test FAILED

Case 3:

• add 3 files at the same time (using crtrl/cmnd button) in multiple file input
• delete all of them
• save form
• expected results: 0 records in database. Test PASSED.

Something is wrong here. Please let me know it is an issue and solve it or close this ticket if it is not

I want to replace default base64 image with backgroundImage base64

here is the script i use

   var upload = new FileUploadWithPreview('myUniqueUploadId', {
            maxFileCount: 4,
            text: {
                chooseFile: 'Maximum 4 Images Allowed',
                browse: 'Add More Images',
                selectedCount: 'Files Added',
            },
            images: {
                baseImage: backgroundImage,
            },
        })

but it doesn't work, How do i display backgroundImage

I had this script on my site, and now it stop working... Error i have is "TypeError: FileUploadWithPreview is not a constructor" Can You help it?

Hi, I was using this utility to upload a profile image but there is no name attribute to get the image on backend (I am using codeigniter on backend). and when I did set it (name attribute) I was getting en empty array with no attributes (like size, name etc).

Hi,

I'm not sure if the option "presetFiles" only works with URL. But it didn't work when I tried to use data:image.

This function provides a convenient way of serving images from your app that are not web-accessible (e.g., in public/).

Cheers

Am unable to remove file from input after adding it, in same way i cant add file when there is file in input.

https://stackoverflow.com/questions/59195429/unable-to-add-or-remove-image-from-multiple-html-input-field?noredirect=1#comment104610264_59195429

So how do i enable upload.cachedFileArray

var upload = new FileUploadWithPreview('myUniqueUploadId', {
  maxFileCount: 4,
  text: {
    chooseFile: 'Maximum 4 Images Allowed',
    browse: 'Add More Images',
    selectedCount: 'Files Added',
  },
});

My html

<input type="hidden" name="upload_log" id="upload-log" value="" />
   <div class="upload-log-images">
   <div class="custom-file-container" data-upload-id="upload-log-images">
     <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" class="custom-file-container__custom-file__custom-file-input" accept=".png, .jpg, .jpeg" multiple>
        <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"></div>
        </div>
  </div>

What i understood is i have all the valid images in cachedFileArray.

I am trying to sending complete array in hidden input.

window.addEventListener('fileUploadWithPreview:imageDeleted', function(e) {
    if (e.detail.uploadId === 'upload-log-images') {
        jQuery('#upload-log').val(JSON.stringify(e.detail.cachedFileArray))
    }
})

At the server level.

 $files =   $upload_log = json_decode(utf8_encode(stripslashes($_POST['upload_log'])), true);

output is

Array
(
    [0] => Array
        (
            [token] => pvf6dfs1p65k520olz9r
        )

    [1] => Array
        (
            [token] => 3tii69591shepm5x6apzys
        )

)

Hi, ran across this and trying it out. Thanks!

Using it for one image to test,

If I choose a small image height x width the preview displays/fills the entire preview area. This could make it blurry.

I may find this, but thought I'd give a quick ask,

Is there a way to keep the original image size in the preview area? Get the original image dimensions?

Thanks much! Appreciate it.

Didn't see this in the notes.

Best,

We got two button 1 delete and another one clear . 1 Delete button only work or seen by multiple image not one . 1 Clear button i mistaken as deleted button which not listen to imageDeleted .

Hello @johndatserakis , I am getting this error Uncaught TypeError: file_upload_with_preview__WEBPACK_IMPORTED_MODULE_4__.FileUploadWithPreview is not a constructor in ReactJs v18.2.0

"file-upload-with-preview": "^5.0.8",

Here is my sample code

import "file-upload-with-preview/dist/file-upload-with-preview.min.css";
import { FileUploadWithPreview } from "file-upload-with-preview";

import React, { useState } from "react";

function Gallery() {

  if (typeof window !== "undefined") {
    const upload = new FileUploadWithPreview("file-upload", {
      multiple: true,
    });
  }

  return (
    <div
    class="custom-file-container"
    data-upload-id="file-upload"
  ></div>
    );

}

Hi, I am having an issue that input element attribute name is not present in the dynamically generated field which is causing problems in the server side, then I tried attaching dynamically to it using the Custom JS it gets attached to the input element but still I can not receive the image on the server side, so could you elaborate how to work around with this, thanks for your help, your plugin has been a big help.

Please can you create an easy and simple example to run the upload and then use the uploaded file for beginner with nothing more than a webserver, jquery und nothing more (at this step). I dont have npm (and wont use it), because its over-overloaded for a simple upload at my own server for me only. Thanks Bfo