angularjs+python(Flask) file upload to server

Question

I am developing a web app using angular, python and Flask. In my app there is a form where the user need to enter some data and to upload his photo. I want to implement the file upload to the server using angular. I saw that I need to use the FormData() and to bind the data from the HTML to angular using "watch". The javascript part is clear. I don't understand how can I get the data from the Python side.

This is my HTML -

<form  enctype="multipart/form-data" ng-submit="submitGuideDetailsForm()">
  <div class="form-group">
    <label for="usr">Add your photo:</label>
    <input type='file' class="form-control" name='file' onchange="angular.element(this).scope().uploadFile(this.files)">
  </div>
</form>

This is my angular -

 $scope.uploadFile = function(files) {
            $scope.file = new FormData();
            $scope.file.append("file", files[0]);
        };
 $scope.submitGuideDetailsForm= function() {
     $http.post('/uploadFile', $scope.file, {
           headers: {'Content-Type': undefined },
           transformRequest: angular.identity
          }).success(function(results) 
           {   
              $log.log('success load file')
           }).error(function(error) 
           {
              $log.log('error load file!!!!!')
              $log.log(error);
           });
       };

I want to get the file on the server side, using python and flask -

@app.route('/uploadFile', methods=['POST'])
def uploadFile():
  json_data = request.json
  print(json_data)
  status = 'success'
  return jsonify({'result': status})

I don't know how to get the data from the 'request' object. request.json does not work.

Please advice me what am I doing wrong. How can I get the data from the 'request' object? Do I need to encode the data to a file? How do I send the data back to client? Do I need to encode it back? I did not find a full example using angular and python/flask uploading a file to server, saving it and than downloading it to the client. Thanks a lot, Dina

try request.file or request.files

reptilicus
– reptilicus

2016-04-15 22:22:43 +00:00
Commented Apr 15, 2016 at 22:22 — reptilicus
– reptilicus, Commented Apr 15, 2016 at 22:22

yolle · Accepted Answer · 2017-07-27 09:43:32Z

1

the file can be get byfile = request.files['file'] after that, you can get the filename by file.filename.encode("utf8")

answered Jul 27, 2017 at 9:43

yolle

316 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Muhammad Ali Over a year ago

Thanks man! that helped me deal with one of the quite errors I was having

Dina · Accepted Answer · 2016-04-24 12:12:49Z

0

The command 'request.files' work The gets me the following object -

ImmutableMultiDict([('file', <FileStorage:
 u'12132638_10153196350425732_1151540092606190338_o.jpg'
 ('image/jpeg')>)])

I don't understand how can I save it on the server. How do I get only the file name out of this object And how do I send it back to the client side?

Thanks a lot, Dina

answered Apr 24, 2016 at 12:12

Dina

611 silver badge3 bronze badges

Comments

Junior_K27 · Accepted Answer · 2019-08-14 05:43:54Z

0

Use request.files and .filename atrribute

file = request.files['file']
fileName = file.filename

#to store it on server use getvalue() and write it to the file object
filedata = file.getvalue()
with open('abc.png') as f:
    f.write(filedata)

answered Aug 14, 2019 at 5:43

Junior_K27

1611 silver badge9 bronze badges

Collectives™ on Stack Overflow

angularjs+python(Flask) file upload to server

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related