kartoteket / vue-image-upload-resize Goto Github PK

After building a production version of my VUE app, the error throw "n is not defined". (No issue in dev version)

This issue only happens in .min.js:
/dist/vue-image-upload-resize.umd.min.js

You can locate the error function by searching the following pattern (that's where I found the issue)
{var i="";for(n=t;n<t+r;n++)i+=String.f

I simply add let before the variable and the issue solved in my case. (I tested it in my production build.)

After my edit:
{var i="";for(let n=t;n<t+r;n++)i+=String.f

Thank you again for your work, and I do appreciate it. Please consider my case and fix it, cause I believe it is a good VUE image uploader which is very helpful for so many possible projects.

I have autoRotate set to true but when I upload the image through my iphone it comes in turned.

v

always give me this error, please help

Vue version : 3.1.1

Hey guys,

I'm working with dynamic Creation Component, which means a user can add whatever of component he wants.I create it base on this documentation dynamic component creation.

I need to send an index when the user wants to upload the image, like this :

<div v-for="(line, index) in lines" v-bind:key="index">
{{index}}//if i log the index its 0,1,2,3 and its ok
...
          <image-uploader
            :preview="true"
            :class-name="['fileinput', { 'fileinput--loaded': line.hasImage }]"
            :capture="false"
            :debug="0"
            :auto-rotate="true"
            output-format="blob"
            accept="image/*"
            @input="setImage(output , index)"
            :ref="'fileUpload'+index"
          >
...

And the setImage funciton :

    setImage: function(output,index) {
      console.log(index);
      console.log(output);
      return ;
      this.lines[index].hasImage = true;
      this.lines[index].image = output;
      let formData = new FormData();
      formData.append("file", output);
      Ax.post(upload_route, formData, {
        headers: { "Content-Type": "multipart/form-data" }
      })
        .then(response => {
          // upload successful
        })
        .catch(error => console.log(error));
    }

And the log result is:

The index always is 0 :(

How can i send an index when i want to upload it?

I read this passing event and index and test it but it's not working on component.
Because This is a custom event not a DOM event.

What should I do?

Thanks.

i want to use your component more than one in specific page. When i try to use it as i want, uploaded image replaced preview components image. How can i solve it?

At some point in time (I'm not sure which version) after updating the version of vue-image-upload-resize, picking between the camera and gallery seemed to have stopped working. On Android (9) with Chrome (latest), it goes directly to the camera and doesn't allow a user to select an already taken image from the gallery. I'm using the below code:

<image-uploader
  @input="setOutput"
  :debug="2"
  :quality="0.7"
  :autoRotate="true"
  outputFormat="base64"
  class="fileinput2"
  :preview="true"
  capture="camera"
  accept="image/*"
></image-uploader>

Any idea if this is a bug or if I'm doing something wrong?

Hi, I'm new to this. I managed to implement the tool, it generates the preview correctly. However, is there any way to take the reduced image and save it to a folder? By js.

Thank you in advance and congratulations on the development.

I understand the example but I need to upload the image and I read in the documentation that is used @onUpload and @onComplete. Is there an example or can you tell me how this works?

Hi,
I would like to initiate upload form from any other element than stated directly in the fileinput.
For example I have your component with label in the form of svg icon and would like to add the whole component into button. Then by clicking the button, initiate the upload. But upload is initiated only by clicking on the icon now. Is it possible somehow?

I'm not sure if this is supposed to work in Vue 3 or not, but I can't get it to work.

I get the following error:

vue-image-upload-resize.common.js:1031 Uncaught (in promise) TypeError: Cannot read property '_c' of undefined
    at Proxy.render (vue-image-upload-resize.common.js:1031)
    at renderComponentRoot (runtime-core.esm-bundler.js:1165)
    at componentEffect (runtime-core.esm-bundler.js:5184)
    at reactiveEffect (reactivity.esm-bundler.js:42)
    at effect (reactivity.esm-bundler.js:17)
    at setupRenderEffect (runtime-core.esm-bundler.js:5137)
    at mountComponent (runtime-core.esm-bundler.js:5096)
    at processComponent (runtime-core.esm-bundler.js:5054)
    at patch (runtime-core.esm-bundler.js:4660)
    at mountChildren (runtime-core.esm-bundler.js:4844)

With the following warning immediately afterwards:

Property "$createElement" was accessed during render but is not defined on instance. 
  at <ImageUploader id="profileImageUploader" debug=0 maxWidth=180  ... > 

Has anyone gotten this to work in Vue 3?

Good day @svale. How to get ID on setImage function when using multiple uploader in one page? I want to use one function for all uploaders. Thank you.

From the docs:

maxWidth / maxHeight
An integer in pixels for the maximum width allowed for uploaded images, selected images with a greater width than this value will be scaled down.

For images smaller than maxWidth/maxHeight, it means scaling up reducing the quality. Example:

:maxHeight="100"

results in scaling up

ImageUploader: original image size = 98 X 28
ImageUploader: scaled image size = 350 X 100

Expected behavior:
do not scale the image if image size is smaller than maxWidth/maxHeight

Dont know why. but cant disable input on any way
im use normalize.css on the project

I am trying to provide ImageUploader's component a javascript File object on my template mounted event.

My first try was to access with vanillajs using document.getElementById('inputfile').value = myFile but then I receive a warning from vue about accessing/using an asset no longer available.
Looking at ImageUploader.vue source code, it doesn't seams like there is a way to achieve such thing.

One similiar behaviour I could see in a similar project (thinking about vue-picture-input) is the use of a prefill function:

prefill: (image url or File object, optional) use this to specify the path to a default image (or a File object) to prefill the input with. Default value: empty.

I might be missing something obvious, but could propose a PR if no options yet.

I have to have two upload buttons in the same page.
An example would be

• One to upload a cover image
• Another one to upload a logo

However, If we have two instances of the Image uploader even with different ID's as recommended, uploader does not work

Thank you for this awesome component. Is there any event before upload image? I want to check image aspect ratio before upload image. For example. If someone try to upload image with aspect ratio 4:2, then it's impossible to upload. Because i set image aspect ratio to 4:3. By the way, I really want to get event before upload image.

Any Suggestion would be greatly appreciated. Thank you

I'm using a vue capacitor and issue: I don't want the user to capture images from the camera; I just want the user to select images from their phone. :capture="false" It works fine on Android but not in IOS

<image-uploader
    :debug="1"
    :maxWidth="200"
    :maxHeight="200"
    :quality="0.3"
    :autoRotate="true"
    outputFormat="verbose"
    :preview="true"
    :className="['fileinput', { 'fileinput--loaded': hasImage }]"
    :capture="false"
    accept="image/*"
    doNotResize="['gif', 'svg']"
    @input="setImage"
    ref="imageFile"
    style="display: none"
  ></image-uploader>

on ios,
when I click the upload image button
it shows only camera, no "photo library" option

Setting the autoRotate prop after an image has been selected does not produce the expected outcome (at least for my use case!) Neither the preview nor the base64 output change when :autoRotate changes. With Chrome auto rotating photos now, sometimes the image-uploader component is rotating already rotated photos, so it would be nice if the user sees in the preview that the photo isn't oriented correctly, they could toggle autoRotate off.

<image-uploader
  @input="setOutput"
  :debug="2"
  :quality="0.7"
  :autoRotate="attemptAutoRotate"
  outputFormat="base64"
  class="fileinput2"
  :preview="true"
  accept=".jpg"
/>
Attempt to rotate: <v-switch v-model="attemptAutoRotate">Auto rotate</v-switch>

Hello,

I noticed you're having troubles with the dependecy exif-js (#15) which contains bugs but is no longer maintained (for over two years now).

I'd like to offer you a help with that. I'm a developer of another library exifr. It's small, fast, configurable (so just a few core files can be used to extract the photo's orientation instead of using the whole library), supports more formats (tiff, heic), has fixes for bugs known to be in exif-js, etc...

I'd be happy to do a Pull Reqest swapping exif-js for exifr if you're open to that.

Thank you

I like very much of you guys are doing and i think the tool works very well.
But there is a way to get the original image that is uploaded?

I want to save the original and the resized image on my storage server.

Thanks and keep the good work.

I can't seem to launch the file select dialog using javascript like I would for regular elements.
Is there any event handler i can hook to? eg @click?

The particular application i'm trying to achieve is this:

• I hide the file select and show a custom button that "clicks" on the file select whenever the user clicks on that button.

can you help me please, how can i config for accept files like pdf, docs, image, etc?

Not able to disable vue-image-upload-resize component when needed.

I tried using prop like disabled and :disabled="true" but neither seems to do the trick.

It keeps giving the error "Failed to mount component: template or render function not defined."

And I have all dependencies required to load the component.

hey there

I know you can call this script externally and can add to a Vue.use
but what about use case scenario where you want to import your component in a single component only like below?

this method seems to return:
Failed to mount component: template or render function not defined.
found in
--->

import ImageUploader from 'vue-image-upload-resize'

export default {
    components:{
        ImageUploader 
    }
}
</script>

is there a way of getting around this?

Hi,

Thank you for this really useful component.

Do you have any status about the multiple file support ?

Best regards

Hi,

would it be possible to make capture on the input tag optional, in the next release?

Are you accepting pull requests on that?

Dirk

Hi,

I am using vue-image-upload-resize (version 2.1.2) to resize the files but I lose the exif data. In my 'setImage' function the console.log is displayed as the picture below. Please note that there is Exif data in there. But when the data is used in setImage, its always undefined. It seems that the Exif object does not exist immediately in setImage but is embedded into console later?

Please help.

Regards
Deepam

Unfortunately you're not able to use this with nuxt, as trying to load the component results in attempts to access window which isn't defined.

I'll investigate further soon :)

<image-uploader
  :maxWidth="1500"
  :maxHeight="1500"
  accept=".jpg, .jpeg, .png"
  outputFormat="string"
  :quality="0.9"
  :scaleRatio="0.7"
  :preview="false"
  @input="uploadImage('docphoto', $event)"
/>

Seems like there's no way to style file input with Vuetify:

<v-file-input label="File input" />

Or there's a way to style it? Maybe a slot?

Throws the following error when using as a plugin in Nuxt JS.

Reason: ReferenceError: window is not defined

    !(__WEBPACK_AMD_DEFINE_RESULT__ = (function() {
      return dataURLtoBlob
    }).call(exports, __webpack_require__, exports, module),
        __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__))
  } else {}
})(window)

in ~/plugins/image-uploader.js

import Vue from "vue";
import ImageUploader from "vue-image-upload-resize";

Vue.use(ImageUploader);

Work Around

Using <client-only> tag provided by nuxt

<client-only>
  <image-uploader :quality="0.9" :max-width="512" accept="image/*" ... />
</client-only>

and registering components locally as

components: {
  ImageUploader: () => import("vue-image-upload-resize")
},

This is more of a support request than an issue, sorry if this is the wrong space for it...I'm attempting to use the vuetify-upload-button component to select the image for upload. Below is the code I'm trying. Any ideas? I've tried a number of variations, such as setting <upload-btn class="fileupload"> and :className="fileupload" etc, but I can't seem to get it to work.

<td>
  <image-uploader
    :debug="2"
    :quality=".7"
    :autoRotate=true
    outputFormat="base64"
    :preview=true
    :className="upload-btn"
    capture="environment"
  >
  </image-uploader>
  <upload-btn></upload-btn>
</td>

I end up with both buttons, and the "upload" button doesn't actually interface with the component.

I'm sorry I'm just newbie, so this question may you are unconfortable.
So this plugin is working well, but I have a problem that I have no idea how to preview in specific HTML tags.
Is there any way to see the preview image in them?

Verbose and Blob both strip the EXIF data from the original file. How can I retain that information to be posted to an API server?

Hi.
First of all @svale - this looks like an awesome fileuploader component, and is exactly what I was looking for.
I am trying to use this in my Vue CLI3 project, and I can't get it to work...
I have tried different types of configuration, but it will not emit any of the 3 events documented.
So it seems like nothing happens when I select an image, and the standard upload control (in Chrome) shows :" No file chosen "

The markup in DevTools look like this:

<div>
<img width="400" class="img-preview" style="display: none;">
<input id="fileInput" type="file" accept="image/*" capture="environment" class="fileinput">
</div>

...and the component looks ok in the Vue-devTools inspector.

My latest atempt looks like this in my view file:

<image-uploader :debug="1" :autoRotate="false" outputFormat="string" :preview="true"
             :className="['fileinput', { 'fileinput--loaded' : hasImage }]" capture="environment" 
            @input="setImage">
</image-uploader>

An idea of what makes it unresponsive ?
Any other dependencies I need with CLI3 ?

Best regards
iToreTS

Is there any way to modify the text/icon/button for the tool? I would like to modify the text to be Capture/Select Photo and NOT show the file name how would I do that?

The component was totally awesome uploading the images, but then i had to test it on a xiaomi cellphone and it crashes the application. Some clue? I was using quality of 0.75 and uploading only images.