Nginx Question posted in
The official documentation can be found here.

How to get uploaded image in react by url? – Nginx

I want to realize uploading files for my users. I use CKEDITOR 5 in my react project. Back-end on nodeJS.
So, i can upload file, can get its Url, but, can’t display one in VIEW page.

//my server code

const express = require('express');

//for uploading i use this module
const multiparty = require('connect-multiparty');
const multipartyMiddleware = multiparty({uploadDir: '/var/www/group0384.ru/public_html/server/uploads'}) //here is whole path to my upload folder on server

const app = express();
const port = 3555;
const path = require('path');
const moment = require('moment');
const fs = require('fs');


//so, here i have route /upload, which is indicated in configuration of ckeditor as route to send pictures
app.use(express.static("uploaded"));
app.post('/upload', multipartyMiddleware, (req, res) => {
  var TempFile = req.files.upload;
  var TempPathfile = TempFile.path;

  const targetPathUrl = path.join(__dirname,"./uploaded/"+TempFile.name);

 if(path.extname(TempFile.originalFilename).toLowerCase() === ".png" || ".jpg"){
   
  fs.rename(TempPathfile, targetPathUrl, err =>{

      res.status(200).json({
       uploaded: true,
        url: `${__dirname}/uploaded/${TempFile.originalFilename}`
      }); // this path is the same as in 5th row (except folder, here it change, but it's no matter) 

      if(err) return console.log(err);
  })
 }

})


//------------CKEDITOR CODE---//
        <CKEditor
            editor={ClassicEditor}
            data={this.state.data}
            onChange={(event, editor) => {
              this.setState({
                data: editor.getData(),
              });
            }}
            config={
              {
                ckfinder: {
                  uploadUrl: '/upload'
                } // here, /upload - the route to send pictures
              }
            }
          />
          
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

On my VIEW page, i getting this

screenshot

So, i’ve tried to change paths, but still couldn’t get the picture.

please explain why I can’t just get and output a file that is already uploaded on my own server

P.S. Sorry for my english

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you all for answers, i resolved the problem.

    In this part i change url for uploaded images

    res.status(200).json({
       uploaded: true,
        url: `/files/${TempFile.originalFilename}`
      });

    Then, i created route with this url

    app.get('/files/:url(*)', (req, res) => {
  console.log(req.params.url)
  res.sendFile(path.resolve(__dirname + '/uploaded/' + req.params.url))
})

    And it works!


  2. 0

    It seems from the screenshot that you are getting the absolute path to the image, if you want to show the image on the client-side and you are sure the image is saved on your server, you have to send it back as a public URL address of your image!

    example: "http://example.com/images/image1.png&quot;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search