angular does not find an uploaded image

Question

The scenario is simple. Use a form to upload an image and if it is successfully uploaded, refresh a photogallery. I use angular6 and ng-carousel. All the system is locally set i

Answer 1

Angular uses AOT(Ahead of Time) compiling which will read the already existing files that are available when compiling. The uploaded images are to be saved in the server-side code, for example: in a folder server/uploads.

When the API to avail the links of the images are called, the response can have the baseURL/file-name. For the development server in your case, it would be localhost:3000/uploads/unsplash.jpg. Make sure you have made the uploads folder static.

In case if you are using a node JS (Express) in the server-side, here's an example

const fs = require('fs-extra')
app.use(express.static(__dirname + '/uploads'));

app.get('/gallery',(req, res) => {
    fs.readdir(('./uploads'),(err,files) => {
            let filePath = []
            files.forEach(filename => {
                filePath.push('http://localhost:3000/uploads/' + filename)
            })
            res.json({
                files: filePath
            })
    })
})

app.listen(3000, () => {
    console.log('Server started on port:', 3000)
})

This will provide you with the paths of the images in the uploads folder and can be viewed in the client-side unlike storing it in the assets folder

Answer 2

This might be a solution for you:

For a live application you probably would want to save your images on a fileserver (for. example AWS S3 on Amazon AWS), and store the link to this file in a database.

For your localhost project you can use http-server to function as this fileserver or you can use the express framework with ur node application.

npm install http-server -g
http-server C:/link/to/a/folder/you/have/saved/the/images/in

Then you must save the link to your file, either in a db (database) or inn a textfile. For this I would recomend that you setup a local MongoDB database. This might take some time for you to get into, but it is good learning experience. You can use https://mongoosejs.com/ to communicate with your node application.

Then when you upload a new image, you send it from your frontend Angular app, to your backend node/express application, save the file in the folder and save the link in the db. With the https-server you will be able to access the image right away (with maybe som delay). And with the links stored in the db you can send the data in the db to your front end with a http get request whenever you refresh your application.

I hope this will help you to reach your goal :)