Uploading files with AngularJS without the need for a backend script like PHP, JAVA, or any other server-side language

While this is just a demo and my backend team has not yet started, I would like to save the file to a specific folder within my project (I do not want to save it in the database).

All I want is that when I upload a file and click on the upload button, that file should be copied to a particular folder within the project. This process should be done using AngularJS or JavaScript only, without any backend scripting (e.g. PHP, JAVA, etc).

I have tried the following code snippets, but I am not getting a 404: PATH NOT FOUND error for the folder where I want to upload.

Examples I've Tried:

myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){

$scope.uploadFile = function(){
    var file = $scope.myFile;
    console.log('file is ' );
    console.dir(file);
    var uploadUrl = "/fileUpload";
    fileUpload.uploadFileToUrl(file, uploadUrl);
};

}]);

https://jsfiddle.net/JeJenny/ZG9re/

http://jsfiddle.net/danialfarid/maqbzv15/1118/

Please provide some suggestions.

Answer №1

If you're trying to send a POST request to a specific location, you'll need a backend endpoint set up to handle that request. This is why you're receiving a 404 error indicating the page was not found.

If you want to showcase this functionality locally, you can use the file.Copy() method to simulate file saving. Check out this resource for more information:

Answer №2

If you're looking to implement file uploads in Angular, check out the angular-file-upload library here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How do I group data based on multiple conditions in JavaScript?

I have the data structured as follows: [ { "Id": 1, "Title": "Title_1", "Positive": 5, "CreateTs": 1674231433428 }, { "Id": 2, "Title": "Title_1", ...

Guide to Capturing a Comprehensive Stack Trace Using Winston 3

Here is how I have configured my logging system: const customFormat = printf(info => { return `${info.timestamp}: ${info.level}: ${info.message}: ${info.err}`; }); const newLogger = winston.createLogger({ level: "info", format: combine( ...

The request.files property in express-fileupload is consistently coming back as undefined

I am trying to achieve the task of uploading a file from my browser and sending it via POST to an Express.js application, which will then download the file using express-fileupload. Here is the client-side JavaScript code I have written so far: // Triggere ...

Truncating decimal points in JavaScript

In this scenario, if the number after the decimal point is 0, then the zero should be removed. Otherwise, the number should be displayed as it is. Here are some examples of what I am aiming for in vue: 100.023 => 100.023 1230.0 => 1230 ...

Issue with JavaScript variables (I presume) - there seems to be a conflict when one variable is used alongside another

I am attempting to conduct a test that requires displaying the number of attempts (each time the button is pressed) alongside the percentage of successful attempts, updating each time the button is clicked. However, I've encountered an issue where onl ...

Utilizing a JavaScript function to toggle the Bootstrap dropdown without the need for manual clicking

I've configured a Bootstrap dropdown in my site's mini cart that includes a lightbox effect to grey out the background content when the dropdown is activated. Here's the code snippet: $(".dropdown").on('show.bs.dropdown hide.bs.dropdow ...

What is the best way to customize the styles of Material UI V5 Date Pickers?

Attempting to customize Mui X-Date-Pickers V5 through theme creation. This particular component is based on multiple layers. Interested in modifying the borderColor property, but it's currently set on the fieldset element, so need to navigate from Mu ...

Challenges with NPM testing

Are there any reported issues with npm on Ubuntu 18.04? Or are there known solutions to the 100:1 error? I am currently enrolled in a course and it's crucial for me to be able to execute code using npm test. Despite multiple attempts at deleting and ...

What measures can I take to ensure a function is only executed once, even in cases where multiple change events are triggered simultaneously?

Individual checkbox clicks work smoothly without any issues. However, checking all checkboxes at once may cause problems when dealing with a large number of municipalities to loop through, leading to flickering in the dropdown and preventing users from sel ...

The Angular component fails to retrieve data from a subscribed service when the data is being fetched from the sessionStorage

Within my Angular application, there exists a service that handles incoming objects by adding them to a list of objects, then saving the updated array to sessionStorage. This service also sends the updated list to another application that is subscribed to ...

Transforming React Arrays into Objects

I am brand new to React and I'm currently receiving a response from a JSON file that looks like this: methodTypes = ["BOTH","INSIDE","OUTSIDE"] outputTypes = ["STANDARD","DETAILED","ALL_ATTRIBUTES_STANDARD","ALL_ATTRIBUTES_DETAILED"] My goal is to t ...

Switching up the Label Colors in Chart.JS

It's been a while since my last question, so please bear with me if I'm not following the rules. I've attached my current code and a reference image of the chart. I am completely new to working with ChartJS. The situation is a bit unique: t ...

Placing a dropdown menu on top of an image

I currently have a slightly rotated menu bar with two buttons as an example: https://i.stack.imgur.com/0sI2P.jpg Due to the rotation, normal HTML handling is not feasible. I am considering using a <map> element to create hyperlinks over the menu it ...

AngularJS - focusing on an element with a directive that is not isolated

Although this question has been raised multiple times (yes, I've gone through all the discussions), I'm struggling to make the focus go to an input box when the directive doesn't use isolate scope. The problem is that the scope.$watch functi ...

What is the process for sending a JSON response and then redirecting to an HTML page after a successful event in Node.js using Express?

Trying to send a JSON response and redirect the page simultaneously in Express.js. Need help figuring out how to achieve this. Is it possible to redirect in Express.js while sending a JSON response to the client? The goal is to use this JSON data to render ...

Tick the checkboxes if they are found in the JSON data

After parsing this JSON object: [{"id_distrib":"1"},{"id_distrib":"44"},{"id_distrib":"4"}] I need to select the following checkboxes: <input id="1" class="cb_distrib_linux" type="checkbox"value="1">Achlinux <input id="2" class="cb_distrib_lin ...

It is my goal to populate the array with numbers while avoiding any duplicate entries

I am currently facing an issue with my code as it is returning a length of 0 instead of the expected result of 5 after excluding duplicates from the array. I have a feeling that there might be something missing in my code, but I just can't seem to fig ...

Is there a way to invoke a template literal tag function on a standard string?

Suppose I have a template literal tag function foo, which allows me to use it like this: const fooTaggedText = foo`some text`; Can I somehow invoke that tag on a normal string? For example: // This doesn't work as expected const fooTaggedText = foo ...

Embedding controller variables into the view using Angular binding in HTML

Looking to connect a variable from the controller to the view: In the Index HTML file: <body ng-app="widget" ng-controller="WidgetCtrl"> <div ng-view class="chatWidget"></div> </body> In the controller: $scope.displaySched ...

Is it possible to customize the appearance of the <audio> tag when used with a playlist?

I am struggling to style an audio tag with a playlist of songs. Does anyone have any pre-made styles that I can use for a normal white MP3 player similar to the one in the picture I attached? The MP3 player I'm aiming for Current player design Her ...