Chunked file upload with angular-js and jquery-file-uplad, nginx and rails -
i trying chunked file upload angular-js , jquery-file-uplad (form github/blueimp). backend rails application running on nginx.
jquery file upload sending first chunk , stops on receiving 201 nginx server.
document here specifies nginx should return 201 created , not 200. can't seem figure out wrong here.
following relevant code sections
js
(function () { 'use strict'; var url = 'jquploadhandle'; blueshiftapp.config([ '$httpprovider', 'fileuploadprovider', function ($httpprovider, fileuploadprovider) { delete $httpprovider.defaults.headers.common['x-requested-with']; fileuploadprovider.defaults.redirect = window.location.href.replace( /\/[^\/]*$/, '/cors/result.html?%s' ); } ]) .controller('demofileuploadcontroller', [ '$scope', '$http', '$filter', '$window', function ($scope, $http) { $scope.options = { url: url, datattype: 'text', multipart: false, maxchunksize: 4000000, //bytes sequentialuploads: true, }; $scope.loadingfiles = false; $('#fileupload').bind('fileuploadadd', function(e, data){ if (data.headers === undefined) { data.headers = {}; } data.headers['session-id'] = "0000000277" }); } ]) .controller('filedestroycontroller', [ '$scope', '$http', function ($scope, $http) { var file = $scope.file, state; if (file.url) { file.$state = function () { return state; }; file.$destroy = function () { state = 'pending'; return $http({ url: file.deleteurl, method: file.deletetype }).then( function () { state = 'resolved'; $scope.clear(file); }, function () { state = 'rejected'; } ); }; } else if (!file.$cancel && !file._index) { file.$cancel = function () { $scope.clear(file); }; } } ]); }()); html markup
<form id="fileupload" method="post" enctype="multipart/form-data" data-ng-controller="demofileuploadcontroller" data-file-upload="options" data-ng-class="{'fileupload-processing': processing() || loadingfiles}"> <!-- redirect browsers javascript disabled origin page --> <!-- fileupload-buttonbar contains buttons add/delete files , start/cancel upload --> <!-- fileinput-button span used style file input field button --> <div class="form-group col-md-offset-4"> <label class="form-inline control-label col-md-3"> upload file <span class="required">* </span> </label> <input type="file" name="file" accept="text/csv, application/json" ng-required="true" ng-disabled="disabled"> <label> download sample <a href='/crm_feeds.csv'> csv <i class='fa fa-share-square-o'></i> </a> </label> <p ng-show="invalid_file" class="help-block">crm data file required.</p> </div> <div class="form-group"> <div class="form-inline col-md-5" > <button type="button" class="btn btn-default cancel" data-ng-click="cancel()"> <i class="glyphicon glyphicon-ban-circle"></i> <span>cancel</span> </button> <button type="button" class="form-inline btn btn-primary start" data-ng-click="submit()"> <i class="glyphicon glyphicon-upload"></i> <span>validate</span> </button> </div> </div> <div> <!-- global file processing state --> <span class="fileupload-process"></span> </div> <!-- global progress state --> <div class="col-lg-5 fade" data-ng-class="{in: active()}" style="margin-top:7px"> <!-- global progress bar --> <div class="progress progress-striped active" data-file-upload-progress="progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div> <!-- extended global progress state --> <div class="progress-extended"> </div> </div> nginx config
user nobody; worker_processes 1; error_log logs/error.log; error_log logs/error.log notice; error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 20; } http { include mime.types; default_type application/octet-stream; upstream localapp { server 127.0.0.1:3000; } #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; server { client_max_body_size 4g; client_body_buffer_size 1024k; listen 80; server_name localhost:3000; #charset koi8-r; #access_log logs/host.access.log main; location /jquploadhandle { upload_max_file_size 0; upload_pass /post_jquploadhandle.json; upload_store /store; upload_state_store /store/states; upload_store_access user:rw group:rw all:r; upload_resumable on; upload_set_form_field file[name] "$upload_file_name"; upload_set_form_field file[content_type] "$upload_content_type"; upload_set_form_field file[filepath] "$upload_tmp_path"; upload_pass_form_field "^theme_id$|^blog_id$|^authenticity_token$|^format$"; upload_cleanup 400 404 499 500-505; } location / { root html; index index.html index.htm @app; proxy_pass http://localapp; } location @upload { proxy_pass http://localapp; } #error_page 404 /404.html; # redirect server error pages static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }
Comments
Post a Comment