angularjs - How to upload files using multiple files input element? -

-

i'm trying upload multiple files multiple input element in 1 form.

for exemple : 

 <form id="category-form" method="post" enctype="multipart/form-data" class="form" name="form">                  <div class="form-group">                   <p>pictures of category</p>                   <input id="a_pics" accept="image/*" type="file" class="file" multiple="true" my-file-upload="a_pics" required/>                 </div>                  <div class="form-group">                   <p>pictures of b category</p>                   <input id="b_pics" accept="image/*" type="file" class="file" multiple="true" my-file-upload="b_pics" required/>                 </div>      </form>

i have service file upload. this, can know input element comes from.

.service('fileservice', function () {     var file = {};     var fileservice = {};      fileservice.getfile = function (name) {         return file[name];     };      fileservice.setfile = function (newfile, index, name) {         if (index === 0 && file[name] === undefined)           file[name] = [];         file[name][index] = newfile;     };      return fileservice; })  .directive('myfileupload', function (fileservice) {     return function (scope, element, attrs) {         element.bind('change', function () {             var index;             var index_file = 0;             (index = 0; index < element[0].files.length; index++) {               fileservice.setfile(element[0].files[index], index_file, attrs.myfileupload);               index_file++;             }             index_file = 0;         });     } });

until there, works well. got map of category/files. but, when upload server, need :

        var a_pics = fileservice.getfile($scope.a_pics);         var b_pics = fileservice.getfile($scope.b_pics);          var option = {             transformrequest: angular.identity,             headers: {'content-type': plan_pics.type}         };          var fd = new formdata();         var index;          (index = 0; index < a_pics.length; index++)            fd.append('file', a_pics[index]);         (index = 0; index < b_pics.length; index++)           fd.append('file', b_pics[index]);          $http.post('/api/projects', fd, option);

so when server receive this, cannot know category of file. got this:

 [{ fieldname: 'file',     originalname: 'a_cat.png',     name: 'f771ac79f61dbdbf6fe689f593939ac5.png',     encoding: '7bit',     mimetype: 'image/png',     path: 'client/assets/images/f771ac79f61dbdbf6fe689f593939ac5.png',     extension: 'png',     size: 8185,     truncated: false,     buffer: null },   { fieldname: 'file',     originalname: 'a_cat (1).png',     name: '830dc77921461b10fecf35004fc00724.png',     encoding: '7bit',     mimetype: 'image/png',     path: 'client/assets/images/830dc77921461b10fecf35004fc00724.png',     extension: 'png',     size: 12192,     truncated: false,     buffer: null },   { fieldname: 'file',     originalname: 'b_cat_8.jpg',     name: '39f3bd6a7204ac5fdf114a870ece9f50.jpg',     encoding: '7bit',     mimetype: 'image/jpeg',     path: 'client/assets/images/39f3bd6a7204ac5fdf114a870ece9f50.jpg',     extension: 'jpg',     size: 98143,     truncated: false,     buffer: null }]

i tried add field in file object. doesn't work. have got suggestion? i'm using angular, express, multer , node.

you need call file fields different things different categories, example:

    var a_pics = fileservice.getfile($scope.a_pics);     var b_pics = fileservice.getfile($scope.b_pics);      var option = {         transformrequest: angular.identity,         headers: {'content-type': plan_pics.type}     };      var fd = new formdata();     var index;      (index = 0; index < a_pics.length; index++)        fd.append('files_a', a_pics[index]);     (index = 0; index < b_pics.length; index++)       fd.append('files_b', b_pics[index]);      $http.post('/api/projects', fd, option);

then you'll 2 different field names in submitted data, , can handle appropriately in server code.


Comments

Post a Comment

Popular posts from this blog

Java 3D LWJGL collision -

-
i making 3d java game lwjgl library, , wondering how add collision detection, player not go through models. i using obj models. here objloader class, loads models: package renderengine; import java.io.bufferedreader; import java.io.file; import java.io.filenotfoundexception; import java.io.filereader; import java.util.arraylist; import java.util.list; import models.rawmodel; import org.lwjgl.util.vector.vector2f; import org.lwjgl.util.vector.vector3f; public class objloader { public static rawmodel loadobjmodel(string filename, loader loader){ filereader fr = null; try { fr = new filereader(new file("res/"+filename+".obj")); } catch (filenotfoundexception e) { system.err.println("couldn't load file!"); e.printstacktrace(); } bufferedreader reader = new bufferedreader(fr); string line; list<vector3f> vertices = new arraylist<vector3f...
Read more

spring - SubProtocolWebSocketHandler - No handlers -

-
i have ugly error during deploying spring app on jboss. 18:11:16,025 error [org.apache.catalina.core.containerbase.[jboss.web].[default-host].[/consumer]] (msc service thread 1-7) exception sending context initialized event listener instance of class org.springframework.web.context.contextloaderlistener: org.springframework.context.applicationcontextexception: failed start bean 'subprotocolwebsockethandler'; nested exception java.lang.illegalargumentexception: no handlers @ org.springframework.context.support.defaultlifecycleprocessor.dostart(defaultlifecycleprocessor.java:176) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor.access$200(defaultlifecycleprocessor.java:51) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.springframework.context.support.defaultlifecycleprocessor$lifecyclegroup.start(defaultlifecycleprocessor.java:346) [spring-context-4.1.3.release.jar:4.1.3.release] @ org.s...
Read more

methods - python can't use function in submodule -

-
my folder structure this: pythonstuff/ program.py modulea/ __init__.py foo.py bar.py here's code bar.py : def hello(): print("hello, world!") here's code program.py : #!/usr/bin/env python3 modulea import bar bar.hello() i run $ python3 program.py somehow error: file "program.py", line 3, in <module> bar.hello() attributeerror: 'module' object has no attribute 'hello' edit: __init__.py file empty. edit2: after trying realized had bar.py in root directory contained hello() method. bar.py in modulea/ directory empty. add it import os __all__ = [] module in os.listdir(os.path.dirname(__file__)): if module != '__init__.py' , module[-3:] == '.py': __all__.append(module[:-3]) the init .py files required make python treat directories containing packages; done prevent directories common name, such string, unintentionally hiding v...
Read more