1

I want to upload file into folder from which my Angular app is served while running on localhost. I'm not able to find any solution without using backend.

For example I just want to upload an image file and that file should copy in specified folder of the project. This should be done only with Angular without using any Backend script or hitting any API endpoint.

Tin
  • 424
  • 5
  • 13
Abdul Rafay
  • 3,241
  • 4
  • 25
  • 50
  • Can you clarify a bit more exactly what it is you're trying to do? You can access basically any file from your assets directory. What type of file are you wanting to "upload" and what do you want to do with it? Is it just a .json file, excel spreadsheet, csv, etc..? – Narm Jul 12 '18 at 15:32
  • for example I just want to upload an image file and that file should copy in specified folder of project. This should be done only with Angular without using any backend script or hitting any api endpoint. – Abdul Rafay Jul 12 '18 at 15:37
  • There is a good opensource package for doing this, check out: https://stackoverflow.com/questions/48889783/upload-file-with-angular-5-and-material/48891065#48891065 – Narm Jul 12 '18 at 15:59
  • 1
    The TeraData Covalent library's FileUpload component still expects to hit an API. Check the "Usage" section of: https://teradata.github.io/covalent/#/components/file-upload – Brandon Taylor Jul 12 '18 at 17:15
  • yes it expects to hit an API, I'm still unable to find any way to accomplish it without hitting an API. – Abdul Rafay Jul 13 '18 at 08:41
  • 1
    You might try a service worker approach. https://angular.io/guide/service-worker-getting-started . It allows to manage a local cache – Piero Aug 20 '18 at 17:29
  • i cant understand the purpose of this question. unless you want to use the user's browser only. In which case you may use localstorage of the browser. – kishea Aug 21 '18 at 14:19
  • you cannot interact with a server and just expect a file to be uploaded. there has to be code on the server handling that – kishea Aug 21 '18 at 14:21

4 Answers4

3

Depending on your webhost, you can make your assets-folder accessible via FTP. Making a FTP-call from javascript (angular is javascript) isn't that difficult. And there are plenty of example and questions about it on the internet (like this)

Why you wouldn't do that:

  • The credentials for your ftp-connection will be accessible in the compiled javascript-code. With a little bit of effort, everyone can find it.
  • Each gate you open through the webhosts firewall, is a extra vulnerability. Thats why everybody will recommend you to add an API endpoint for uploading files so that you keep holding the strings of what may be uploaded.

Edit:

As I read your question again and all the sub-answers, I (think) figured out that you are building an native-like app with no back-end, just an angular-single page front-end application. An I can understand why (you can run this on every platform in an application that supports javascript), but the problem you are encountering is only the first of a whole series.

If this is the case, I wouldn't call it uploadingas you would store it locally.

But the good news is that you have localstoragefor your use to store temporary data on the HDD of the client. It isn't a very large space but it is something...

Stef Geysels
  • 1,023
  • 11
  • 27
2

The assets folder is one of the statically served folders of the Angular app. It is located on the server so you can't add files to it without hitting the server (HTTP server, API, or whatever else...).

Even when running your app on localhost, there's a web server under the hood, so it behaves exactly the same than a deployed application, and you can't add files to the assets folder via the Angular app.

I don't know what exactly you want to do with your uploaded files, but:

  • If you want to use them on client side only, and in one user session, then you can just store the file in a javascript variable and do what you want with it
  • If you want to share them across users, or across user sessions, then you need to store them on the server, and you can't bypass an API or some HTTP server configuration
Guerric P
  • 30,447
  • 6
  • 48
  • 86
  • I have client side only. No need to share across users or user sessions that's why I'm looking for solution without backend as I don't have one in my app, I can't figure out a way to do so. If I can store the file in variable, isn't it possible to create a new file with that variable? – Abdul Rafay Aug 19 '18 at 06:20
  • @AbdulRafay the only kind of file you can create on client side is **cookies**. If your goal is to upload images and display them, then you can create a data URL from the image data and set it into the `src` attribute of an `img` tag. But I'm only guessing what you want to do. – Guerric P Aug 19 '18 at 10:29
  • I'm trying to develop a small speed test application in which user can upload any file from his system to check upload and download speed. – Abdul Rafay Aug 19 '18 at 12:26
  • 1
    @AbdulRafay then the answer is : you cannot do it without a backend. If you want to upload a file you need a target remote server, if you keep it on client, then you just copy it in the computer's memory. – Guerric P Aug 19 '18 at 18:55
  • @AbdulRafay if you don't want to have your own backend for that, you can search for a public API that allows you to upload a file with a high bandwidth – Guerric P Aug 19 '18 at 19:16
2

Based on your clarification in one of your comments:

I'm trying to develop a small speed test application in which user can upload any file from his system to check upload and download speed.

The only way to avoid having you own backend is to use 3rd party API.

There are some dedicated speed test websites, which also provide API access. E.g.:

Note, that many of these APIs are paid services.

Also, I've been able to find this library https://github.com/ddsol/speedtest.net, which might indicate that speedtest.net has some kind of free API tier. But this is up to you to investigate.

This question might also be of help, as it shows using speedtest.net in React Native: Using speedtest.net api with React Native

Tin
  • 424
  • 5
  • 13
1

You can use a third party library such ng-speed-test. For instance here is an Angular library which has an image hosted on a third party server (ie GitHub) to test internet speed.

Jeremy
  • 3,620
  • 9
  • 43
  • 75