Cannot display images correctly using manuallyAddFile()

[NeoTianHow]

I am trying to display images using the manuallyAddFile() method. However, I could not display the images for some reason. Here are my codes: Do Note that I am passing in a base64URL Is that the cause of this issue?

 dropOptions: {
        url: "https://httpbin.org/post",
        acceptedFiles: "image/*",
        // maxFiles: 1,
        addRemoveLinks: true,
        autoProcessQueue: false,
        thumbnailWidth: 160,
        thumbnailHeight: 160
      }

setTimeout(() => {
          this.form.varient.files.forEach(eachFile => {
            var file = {
              size: eachFile.size,
              name: eachFile.name,
              type: eachFile.type
            };
            this.$refs.myVueDropzone.manuallyAddFile(file, eachFile.dataURL);
          });
        }, 0);

[NeoTianHow]

@rowanwins

[NeoTianHow]

@ndarilek @ejucovy @andrewharvey @keevitaja

[rowanwins]

Hi @NeoTianHow

Yes I suspect the base64url is the cause of the issue. If you look at these lines you will see that we attempt some basic validation before creating a thumbnail.

Also please don't tag people on issues unnecessarily - it is not their job (particularly if they aren't maintainers) to provide you with support within 15 minutes of the issue being posted.

[NeoTianHow]

Hi, @rowanwins Thanks for the reply! I am sorry for tagging you, my apologies. If base64URL does not work, is there a way to display the image using a file object? Just to give you more context, whenever a user decides to upload a photo in the dropzone, I used the @vdropzone-file-added event listener to receive the user-upload file. I will then add the file into a list. Right now, I want to display the images whenever the user revisits the dropzone. I have the file object, how can I display it?

[vano20]

I have the same issues, Does my url wrongly submitted?

 let mockFile: any = {

      name: ${imageObject.id}_${

        imageObject.source

          .split('/')

          .pop()

          .split('#')[0]

          .split('?')[0]

      },

      id: imageObject.id,

      accepted: true,

      kind: 'image',

      status: 'fetched',

      type: 'image/jpeg',

      upload: {

        filename: imageObject.source

          .split('/')

          .pop()

          .split('#')[0]

          .split('?')[0]

      }

    }

    ;(this.$refs as any).images.manuallyAddFile(

      mockFile,

      imageObject.source // https://some.site/images/products/831621/5tKVv5j3LTXcogJhuMW8esO7nvktXMwoIvOYLvqM.png,

     () => {

        console.log('Callback')

      },

      null,

      {

        dontSubstractMaxFiles: true,

        addToFiles: true

      }

    )

  })

`

[vano20]

@NeoTianHow hey sorry for the tag as this issue likely not progressing.. Did you by any chance already solving this issue?

[nviitala]

In addition to extensions ("fileUrl.indexOf(".jpg")") user might need to supply files without extensions (eg. server side is rendering the image with permission checks) or as base64.

For me, I am using manuallyAddFile with type: "image/jpeg" and without file extension. Could the script just check if the defined type matches image/* or kind: 'image' or something like that - when there is no extension?

For now, I did solve it via manuallyAddFile(Object, /dynamic/filepath#.jpg) - with #.jpg it assumes it to be an image and server loads it as supposed.

[rowanwins]

Being worked on in #549