0

I have a react function bundled in webpack that resizes image files. I am calling default exported function for resizing. I get the resized image file inside then method of promise which is resolved successfully. But after I assign the value I cant use it anymore it gets undefined after. Here is my code;

var filetoupload;
imageresizer(item.file).then((value) => {
    filetoupload = value;
     });
var anotherinstance=filetoupload;
item.upload.formData.append('files[]',filetoupload);

Here filetoupload variable is correct in browser debug if I just stop after the code execution but gets undefined in normal run. Why is that? My react code is below:

import ReactDOM from 'react-dom/client';
import React from "react";
import Resizer from "react-image-file-resizer";
const resizeFile = (file) =>
  new Promise((resolve) => {
    Resizer.imageFileResizer(
      file,
      80,
      80,
      "JPEG",
      80,
      0,
      (uri) => {
        resolve(uri);
      },
      "file"
    );
  });


export default function resize(file) {
    return resizeFile(file);
 }
Burak Er
  • 21
  • 1
  • 6
  • using a `.then` method ... e.g. `promiseIam.then(val=> console.log(val))` – KcH Nov 05 '22 at 10:18
  • I use the then method to get the data it gets the data without a problem, it works. But when I try to add it to formData with append method it gets undefined. what could be the reason for it?@KcH – Burak Er Nov 05 '22 at 10:56
  • Not sure can you add the code that you tried by editing the question – KcH Nov 05 '22 at 11:52
  • edited it please check it now. @KcH – Burak Er Nov 05 '22 at 18:00
  • It would be `undefined` as the value is not yet available, you can put the code inside `.then` and append in there ... – KcH Nov 05 '22 at 18:04

0 Answers0