1

I'm currently working with pdf files in ReactJS and modifying them in my server side. The problem is, i don't know how to pass my file data to the server side and then send it back.

this is how i get my file :

<div className={"input-file"}>
      <input className="file-upload-field" type="file" accept="application/pdf" onChange={onFileChange}/>
</div>

And then i have

async function modifyPdf(doc, pageNumber) {
  let chemin = [
    `/testun/${doc}`
  ];
  
  await Promise.all(chemin.map(url => {
    fetch(url)
        .then(checkStatus)  // check the response of our APIs
        .then(parseJSON)    // parse it to Json
        .catch(error => console.log('There was a problem!', error))
    }
  ))
  .then(response => {
    newdoc = response[0];
  });

  return doc//newdoc;
}

the problem is that if i want to send an url it would be local, so node wouldnt be able to retrieve the resource (i think? because it's a blob url), and is it possible to pass the arrayBuffer ? Because when i do so, it passes [object arrayBuffer] as a parameter to my route so i don't really know if there is a better option.

Thank you!

bloomlaterencore
  • 13
  • 6
  • You shouldn't send the file in the URL. The URL length is limited depending on the browser to 2000 - 100000 characters \[[1](https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers)]. Send it in the request body. – jabaa May 06 '22 at 09:03
  • Okay, thanks for your reply :) do you know if there is an example of such a thing ? i'm sorry, i'm really new to all of that – bloomlaterencore May 06 '22 at 09:14
  • https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API, https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch – jabaa May 06 '22 at 09:15
  • Have you tried uploading the file to the server and fetching the uploaded file? – Alohe May 06 '22 at 09:18
  • the problem is i don't really know how to upload a file to the server, because before it worked perfectly ; i only modified files that were saved in the client side so it was easy. But know i'm trying to make it more "general", and like not save things in the client side because in react it reloads the page automatically, i'm trying to avoid that – bloomlaterencore May 06 '22 at 09:30
  • Don't forget to mark the most appropriate answer as the solution – Alohe May 06 '22 at 09:57

1 Answers1

0

You can upload your files using multer. You can access the uploaded file from the destination folder on the server or local

const express = require("express");
const multer = require("multer");
const upload = multer({ dest: "uploads/" });

const app = express();


app.post("/upload", upload.single("productImage"), function (req, res, next) {
  var filename = req.file.filename;

  res.redirect("/public/uploads/" + filename);
});

upload.single('productImage') refers to the the input element name and you can get the file name on the backend with req.file.filename

<form action="/upload" method="POST" enctype="multipart/form-data">

    <input type='file' name="productImage" required/>

    <button type="submit">Submit</button>
</form>

After that you can access the file on the front-end http://localhost:3000/uploads/<filename>

Alohe
  • 301
  • 2
  • 11
  • thanks, but the problem is, I still have to save it after the modifications that i do on the server side, so the client part will refresh because it is located in the public file and lose all the data that it had before? – bloomlaterencore May 06 '22 at 13:21
  • You can use [fs.writeFile()](https://nodejs.org/api/fs.html) to update the file server side which will be reflected on the front-end – Alohe May 06 '22 at 16:36
  • Sorry to reply just now ; 1 - I wanted to know if there is a way to redirect the response of the post request to my previous page, just after saving the document ? 2 - I can't just use fs to save my file because it will refresh my client side and so the client side will never receive the data, but maybe if i do it with a post request that -once again- i could redirect it would maybe work ? – bloomlaterencore May 10 '22 at 07:38
  • you can use `res.redirect("/public/uploads/" + filename);` which will redirect the client to the file, I've also updated the answer – Alohe May 11 '22 at 07:16
  • Make sure to mark the correct answer – Alohe May 13 '22 at 06:49
  • hello, i'm not able to do that yet :) – bloomlaterencore May 13 '22 at 07:14