Menu
  • HOME
  • TAGS

Upload file asynchronously with Angular, ng-file-upload using a RESTful API

Tag: javascript,php,angularjs,ng-file-upload

I have a form and a few of that form fields are file uploads. This is what I have:

  1. User fills the form up
  2. User selects the files to submit
  3. User presses submit

Now, this is what I want to do:

  1. Post the form to server, getting back an ID
  2. Post file one to server myresource/ID/fileone
  3. Post file two to server myresource/ID/filetwo ...

¿How can I perform this files upload programatically? (I'm using angular promises, so no problem with sequential requests...)

Here is my code:

$scope.upload = function (files, url) {
      if (files && files.length) {
        for (var i = 0; i < files.length; i++) {
          var file = files[i];
          Upload.upload({
            url: url,
            //fields: {'username': $scope.username},
            file: file
          }).progress(function (evt) {
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
          }).success(function (data, status, headers, config) {
            console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
          });
        }
      }
    };

My html:

<input type="file" class="btn btn-danger" ng-file-select ng-model="files" ng-multiple="multiple"> Doit!

<input class="btn btn-danger" ng-file-select ng-model="files" ng-multiple="multiple">Doit too!

Best How To :

Ok, so I finally got this.

I did this:

  1. Select file and store file in ng-model
  2. Validate some stuff
  3. Submit main model (The one owning the files I want to upload)
  4. Upload file to endpoints /api/myentity/{id}/resumee, /api/myentity/{id}/dni and /api/myentity/{id}/picture. Where {id} is the id of the entity I just created in the previous step.

So the trick here is to execute two requests, one to create the entity and retrieve the id, the second, to just upload the file.

The code looks like this:

// This is called every time the user selects a file
$scope.selectedFile = function (files, doc) {
      if (doc === 'resumee') $scope.documents.resumee = files.pop();
      else if (doc === 'dni') $scope.documents.dni = files.pop();
      else if (doc === 'picture') $scope.documents.picture = files.pop();
};

// This is called when the user submits the form
$scope.upload = function (docname, url) {

      var file = $scope.stepThree.documents[docname];

      return Upload.upload({
        url: url,
        method: 'POST',
        headers: {'Content-Type': file.type},
        fileFormDataName: docname,
        data: file,
        file: file
      }).progress(function (evt) {
        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
        console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
      });
    };

And finally, the markup is this:

<div class="form-horizontal">
        <div class="form-group">
          <div class="col-sm-2">
            <label> Resumen Curricular </label>
          </div>
          <div class="col-sm-2">
            <button class="btn btn-danger" ngf-select ngf-change="selectFile($files, 'resumee')"> Seleccione</button>
            <p>{{stepThree.documents.resumee.name}}</p>
          </div>
        </div>
 </div>

Since no one commented on this approach/technique, I'll take this as the best way in the world to work with file uploads, angular and a REST API.

PHP / MySQLi: How to prevent SQL injection on INSERT (code partially working)

php,mysql,mysqli,sql-injection,sql-insert

In the New PHP code snippet, you are still vulnerable to injections. You are using a prepared statement in the insert part, but you are not actually using the preparations strengths correctly. When creating a prepared statement, you create a query in which you add placeholders instead of the raw...

Time format conversion with PHP

php,time

<?php $duration="1H10M5S"; $display=str_replace(array('H','M','S'), array(' Hour(s) ',' Minute(s) ',' Seconds'), $duration); echo $display; Output 1 Hour(s) 10 Minute(s) 5 Seconds Fiddle...

Javascript function to validate contents of an array

javascript,arrays

You can use a simple array based test like var validCodes = ['IT00', 'O144', '6A1L', '4243', 'O3D5', '44SG', 'CE64', '54FS', '4422']; function validItems(items) { for (var i = 0; i < items.length; i++) { if (validCodes.indexOf(items[i]) == -1) { return items[i]; } } return ''; } var items = ["IT00",...

MySQL Query returning strange values

php,mysql

You need to join by account_id and also question_id SELECT * FROM `quiz_questions` INNER JOIN `quiz_answers` ON `quiz_questions`.`account_id` = `quiz_answers`.`account_id` AND `quiz_questions`.`question_id` = `quiz_answers`.`question_id` WHERE `quiz_questions`.`account_id` = '1840979156127491' ORDER BY `quiz_questions`.`question_id` ASC LIMIT 5 ...

Not able to access variables in required file

javascript,gulp,require,browserify

Without custom logic, it's not possible to achieve what you want. However I believe you could find a compromise by using ES6 modules instead of CommonJS modules. You would be able to write export var test = 'test'; which declares and exports a variable test. You can then import it...

Can't call fetch directly in Backbone model listenTo

javascript,backbone.js,coffeescript

The handler for each type of event is passed a certain set of arguments. The Catalog of Events has this to say about a "change" event: "change" (model, options) — when a model's attributes have changed. So if you say this: this.listenTo(members, 'change', this.fetch) then fetch will be called like...

submitting form then showing loading image by javascript

javascript,html

Let suppose on button click you are calling ajax method <button onclick="LoadData();"/> before ajax call show image and onComplete ajax method hide this image function LoadData(){ $("#loading-image").show(); $.ajax({ url: yourURL, cache: false, success: function(html){ $("Your div id").append(html); }, complete: function(){ $("#loading-image").hide(); } }); } ...

Replacing elements in an HTML file with JSON objects

javascript,json,replace

obj.roles[0] is a object {"name":"with whom"}. you cant replace string with object. you need to refer to property "name" in the object obj.roles[0].name Another problem is that var finalXML get a new value every line. you need to add a new value to the variable, not replcae it. var finalXML...

Cant submit form

javascript,php

Your PHP is checking if $_POST['submit'] contains a value. Your form does not contain a form element with the attribute name="submit", so therefore it fails and moves straight to the else statement. If you want to check if the form was posted then you should instead check for: if (!empty($_POST))...

Teechart HTML5, line color and thickness

javascript,html5,teechart

Having a Line series: To modify the line thickness, change the series format.stroke.size property. Ie: Chart1.series.items[0].format.stroke.size=2; To modify the series color, change the series format.stroke.fill property. Ie: Chart1.series.items[0].format.stroke.fill="red"; ...

Get all prices with $ from string into an array in Javascript

javascript,regex,currency

It’s quite trivial: RegEx string.match(/\$((?:\d|\,)*\.?\d+)/g) || [] That || [] is for no matches: it gives an empty array rather than null. Matches $99 $.99 $9.99 $9,999 $9,999.99 Explanation / # Start RegEx \$ # $ (dollar sign) ( # Capturing group (this is what you’re looking for) (?: #...

Error: [$injector:unpr] Unknown provider: RestangularProvider <- Restangular <- ctrlAG

javascript,angularjs,restangular

You didn't inject module of 'Restangular' service. Try like this angular.module('AngApp', ['angularGrid','restangular']); ...

Google map infowindow position

javascript,google-maps,events,infowindow

Two issues: There is a typo in your click listener code, javascript is case sensitive, infowindow and infoWindow are different objects, so you are not setting the position of the infowindow correctly. infowindow.open(map); infoWindow.setPosition(event.latLng); You are currently placing the infowindow at the place that is clicked infoWindow.setPosition(event.latLng);. If you want...

Javscript Replace Text in tags without changing children element HTML and Content

javascript,jquery

The way I think you will have to do it is in each element individually and use this jquery small plugin I rewrite here is the code and also fiddle the html <div id="parent"> thisi sthe fpcd <p>p</p> </div> plugin to find the content of the selector text without child...

show div only when printing

javascript,html,css

You need some css for that #printOnly { display : none; } @media print { #printOnly { display : block; } } ...

Get elements containing text from array

javascript,jquery,html,arrays,contains

You can use :contains selector. I think you meant either one of those values, in that case var arr = ['bat', 'ball']; var selectors = arr.map(function(val) { return ':contains(' + val + ')' }); var $lis = $('ul li').filter(selectors.join()); $lis.css('color', 'red') <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li>cricket bat</li> <li>tennis ball</li> <li>golf ball</li>...

php redirection working in chorme but not on firefox

php,google-chrome,mozilla

have you tried using header('location') function? example : <?php if (isset($_POST['putonline'])) { $query = "UPDATE user SET status= '1' WHERE id= '$new_id'"; $result = $cid-> query($query); if ($result== TRUE) { header("location:EidEmp.php"); die(); } else { echo "Failed"; } } ?> Edited : Maybe Change Your header function with javascript function...

RecursiveIteratorIterator to fetch subdirectories

php

I would change if ( $dir->isDir() ) to if ( $dir->isDir() && $dir != $root) to remove the root directory...

How to search images by name inside a folder?

php,mysql,image

This looks like a job for glob, which returns an array of file names matching a specified pattern. I'm aware of the other answer just posted, but let's provide an alternative to regex. According to the top comment on the docs page, what you could do is something like this:...

Parsing XML array using Jquery

javascript,jquery,xml,jquery-mobile

EMI and CustomerName are elements under json so you can use .find() to find those elements and then text() to get its value. $(data).find("json").each(function (i, item) { var heures = $(item).find("CustomerName").text(); var nbr = $(item).find("EMI").text(); console.log(heures); }); .attr() is used to get the attribute value of an element like in...

PHP Regular Expressions Counting starting consonants in a string

php,regex

This is one way to do it, using preg_match: $string ="SomeStringExample"; preg_match('/^[b-df-hj-np-tv-z]*/i', $string, $matches); $count = strlen($matches[0]); The regular expression matches zero or more (*) case-insensitive (/i) consonants [b-df-hj-np-tv-z] at the beginning (^) of the string and stores the matched content in the $matches array. Then it's just a matter...

Laravel 4.2 Sending email error

php,email,laravel,laravel-4

Closures work just like a regular function. You need to inject your outer scope variables into function's scope. Mail::send('invoices.mail', array($pinvoices,$unpinvoices), function($message) use ($email) { $message->to($email , 'Name')->subject('your invoices '); }); ...

Javascript sort array of objects in reverse chronological order

javascript,arrays,sorting

As PM 77-1 suggests, consider using the built–in Array.prototype.sort with Date objects. Presumably you want to sort them on one of start or end: jobs.sort(function(a, b) { return new Date(a.ys, a.ms-1) - new Date(b.ys, b.ms-1); }) ...

Javascript change the souce of all images present inside a string

javascript,jquery

You can wrap your string into a jQuery-object and use the .find()-method to select the images inside the message-string: var msg = '<span class="user_message">hiiiiiii<img title=":benztip" src="path../files/stickers/1427956613.gif" /><img src="path../files/stickers/416397278.gif" title=":happy" /></span>'; var $msg = $(msg); $msg.find('img').attr('src', 'path_to_img'); $("#chat_content").append($msg); Demo...

Php Mysql Query not working properly

php,mysql

No need to use union as it will give a lots of duplicate data What you want to achieve can be done with simple left join or inner join SELECT m.issue_name ,m.issue_type , m.priority ,m.status,m.description , m.start_date,m.end_date,m.duration, s.name as server_name,p.name as product_name from mod_networkstatus as m LEFT JOIN tblservers as...

Dynamically select from a dynamically generated dropdown

php,html,select,drop-down-menu

It is because you aren't ending the value attribute, so your selected option becomes <option value="optionvalueselected" -- 'optionvalue' being the value of your selected option, and 'selected' being the attribute you want to set, but won't be set because you never ended value The following should work: <select name="course_id" id="course_id">...

How do I display my mysql table column headers in my php/html output?

php,html,mysql,table,data

Note: You can just make a single file out of it to achieve your wanted output Use mysql_real_escape_string() to sanitize the passed-on value to prevent SQL injections You should use mysqli_* instead of the deprecated mysql_* API Form them in a single file like this (display.php): <html> <form method="post" name="display"...

array and function php

php,arrays

$x and $y are only defined within the scope of the function. The code outside of the function does not know what $x or $y are and therefore will not print them. Simply declare them outside of the function as well, like so: <?php function sum($x, $y) { $z =...

How to get my node.js mocha test running?

javascript,node.js,mocha,supertest

Create a separate file called app.js. The only purpose of this file would be to run the server. You'll also need to export your app object from server.js. So, your server.js would look like this // set up ====================================================================== var express = require('express'); var app = express(); // create our...

Why am getting this error?: Unknown column 'firstname' in 'field list'

php,database,mysqli

$query = "INSERT INTO `myDatabaseForAll`.`users` (`id`, `firstname`, `lastname`, `username`, `password`) VALUES (NULL, $firstname, $lastname,$username,$password)"; you need single quote around text feilds in sql queries change above query to $query = "INSERT INTO `myDatabaseForAll`.`users` (`id`, `firstname`, `lastname`, `username`, `password`) VALUES (NULL, '$firstname', '$lastname','$username','$password')"; ...

want to show and hide text using “this” jquery

javascript,jquery

I guess OP wants to link the button more with corresponding click span class $('.clickme').click(function(){ $(this).parent().prev().find(".click").toggle(); }); FIDDLE DEMO...

how to multiply two column names using codeigniter validation rule

php,codeigniter,validation

You done need to do anything with your controller. Add this change your view to <script> function calculate() { var myBox1 = document.getElementById('crop_quantity').value; var myBox2 = document.getElementById('per_rate').value; var result = document.getElementById('income_amount'); var myResult = myBox1 * myBox2; result.value = myResult; } window.onload = calculate(); </script> <div class="control-group"> <label class="control-label">Crop Quantity</label>...

Sockets make no sense?

javascript,node.js,sockets

The client doesn't get to cause arbitrary events to fire on the socket. It is always a message event. Using the same client, try this server code in your connection handler: socket.on('message', function(data) { // data === "pressed", since that's what the client sent console.log("Pressed!"); socket.close(); }); ...

session value in javascript cannot be set

javascript,function,session

Javascript is a client-side language. Session are server-side component. If you want to update session when user does something on your page, you should create a ajax request to the server. Or maybe use some client side variables that, for some aspects, are similar to session (they will be forever...

Automatically calling server side class without

javascript,html,ajax

Trigger the click event like this: $('._repLikeMore').trigger('click'); ...

slideToggle state not working with multiple boxes

javascript,jquery,cookies

Use onbeforeunload function of javascript window.onbeforeunload = function() { //Declare cookie to close state } This function will be called every time page refreshes Update: To make loop through every value use this $.each this way: var new_value = ""; window.onbeforeunload = function() { $.each($('div.box_container div.box_handle'),function(index,value){ new_value = ($(value).next('.box').css('display') ==...

How To Check Value Of String

javascript,css,string,numeric

document.GetElementById("tombolco").style = "display:block"; That's not the right way. This is document.getElementById("tombolco").style.display = 'block'; Also note that it is getElementById, not with a capital G. Same with 'none',Rest of your code is fine. Fiddle...

Substring of a file

javascript,arrays,substring

To get your desired output, this will do the trick: var file = "a|b|c|d, a|b|c|d, a|b|c|d, a|b|c|d, a|b|c|d"; var array = file.split(", ") // Break up the original string on `", "` .map(function(element, index){ var temp = element.split('|'); return [temp[0], temp[1], index + 1]; }); console.log(array); alert(JSON.stringify(array)); The split converts...

How can I replace the white rectangle within an image using ImageMagick?

php,image-processing,imagemagick

I think you can locate the shape pretty accurately with a simple threshold, like this: convert image.jpg -threshold 90% result.jpg and you can then do a Canny edge detection like this: convert image.jpg -threshold 90% -canny 0x1+10%+30% result.jpg The next things I would be looking at are, using the -trim...

compare today's date with unix timestamp value in database

php,mysql

If I understand correctly you have a unix timestamp in a varchar field and you can't change this. If you compare the unix timestamp directly you will only get results that match the exact second of the timestamp. You can use FROM_UNIXTIME() to convert the timestamp in a date value...

Javascript: Forloop Difference between i++ and (i+1)

javascript,loops,for-loop

The i++ is using post increment, so the value of the expression i++ is what the value was in the variable i before the increment. This code: if(sortedLetters[i] !== sortedLetters[i++]) return true; does the same thing as: if(sortedLetters[i] !== sortedLetters[i]) return true; i = i + 1; As x !==...

How to find the days b/w two long date values

javascript,jquery,date

First you need to get your timestamps in to Date() objects, which is simple using the constructor. Then you can use the below function to calculate the difference in days: var date1 = new Date(1433097000000); var date2 = new Date(1434479400000); function daydiff(first, second) { return (second - first) / (1000...

php include capitalization on files

php

Your local host must be Windows, that doesn't differentiate between upper and lower case in file names and your web server Unix Based which does, simple as that.

Include both local and server at the same time

php

file_exists: http://php.net/manual/en/function.file-exists.php is_dir: http://php.net/manual/en/function.is-dir.php Best way to do that is use dirname(__FILE__) which gets the directory's full path of the current file in ether unix of windows format. Then we use realpath() which conveniently returns false if file does not exist. All you have to do is specify a relative...

access the json encoded object returned by php in jquery

php,jquery,ajax,json

Try: $.ajax({ url: "functions.php", dataType: "JSON", data: {id: id}, type: 'POST', success: function(json){ for(var i=0;i<json.length;i++){ alert(json[i].fname); } } }); ...

Login Signup PopUp

javascript

In your code you have 2 options to solve it first is jquery and second one is css. 1) Jquery On load trigger click event. $('#cont-1').click(); OR 2) CSS Add hide class in second tab <div class="tabcontent hide" id="cont-2-1"> and add activeLink class for login <a href="javascript:;" class="inactive activeLink" id="cont-1">Login</a>...

Converting “i+=n” for-loop to $.each

javascript,jquery

A jQuery only way would be to iterate over the nth-child(4n) $('.thumbnail:nth-child(4n)').each(function(){ $(this) .prevAll('.thumbnail').andSelf() .wrapAll($('<div/>',{class:"new"})) }); Demo Considering the complexity, not sure whether the prevAll() performs better than the plain for loop. Referring one of my similar answer here...

Angular $http and Fusion Tables in IE9

javascript,angularjs,internet-explorer-9,google-fusion-tables

You should use the Angular $http.jsonp() request rather than $http.get(). JSONP or “JSON with padding” is the communication technique which allows for data to be requested from a server under a different domain (also known as a Cross Origin Request). Which is what you have used in your jQuery AJAX...

Saving data using promises

javascript,parse.com,promise

Instead of going for recursive, you can try this: classPromise = array.map(function(obj){ return obj.save();}); in es6, same thing can be: classPromise = array.map(obj => obj.save()); Edit You can reduce the whole function to: function myFunction(array, value) { if ( !array || !array.length) return; console.log("array: " + array.length); if (!value) value...