Receive JSON Object from ReactJS on my Django BackEnd

Question

I'm trying to get a list of upload files and at the same time a JSON Object from ReactJS FrontEnd to my Django BackEnd,

in views.py

@csrf_exempt
def simple_upload(request):

    if request.method == 'POST':

        print("REQUEST POST: ", request.POST)
        print("REQUEST META: ", request.META)
        #received_json_data = json.loads(request.body.decode("utf-8"))
        #print("JSON DATA: ",received_json_data)

        #print(received_json_data)

        gps = request.FILES['gps']

        fs = FileSystemStorage()
        filename_gps = fs.save(gps.name, gps)
        print(fs.url(filename_gps))
        gps_json = json.load(open(fs.url(filename_gps)[1:]))
        print("GPS: ",gps_json)

in my_template.html

if have a dropzone

<div class="dropzone">

  <div class="content">
    <img src="{% static 'core/img/upload.svg' %}" class="upload">
    <span class="filename"></span>

    <input type="file" name="myfile" class="input" multiple>
    <input type="file" name="myjson" class="input">

  </div>
</div>

Edit:

JSON Object from FrontEnd ReactJS:

var jsonGPS = {"latitude":123456,"longitude":123456}
form.append("gps",jsonGPS)

Issue 1:

[2018-08-17 20:51:25 +0000] [31996] [DEBUG] POST /uploads/simple/
Internal Server Error: /uploads/simple/
Traceback (most recent call last):
  File "/home/miguel/virtualizacion/local/lib/python2.7/site-packages/django/core/handlers/base.py", line 149, in get_response
    response = self.process_exception_by_middleware(e, request)
  File "/home/miguel/virtualizacion/local/lib/python2.7/site-packages/django/core/handlers/base.py", line 147, in get_response
    response = wrapped_callback(request, *callback_args, **callback_kwargs)
  File "/home/miguel/virtualizacion/local/lib/python2.7/site-packages/django/views/decorators/csrf.py", line 58, in wrapped_view
    return view_func(*args, **kwargs)
  File "/home/miguel/myapp/object-detection-uploader/uploads/core/views.py", line 36, in simple_upload
    gps = request.FILES['gps']
  File "/home/miguel/virtualizacion/local/lib/python2.7/site-packages/django/utils/datastructures.py", line 85, in __getitem__
    raise MultiValueDictKeyError(repr(key))
MultiValueDictKeyError: "'gps'"

Issue 2 (After apply Jerin's Solution):

[2018-08-18 09:29:15 +0000] [24055] [DEBUG] POST /uploads/simple/
Internal Server Error: /uploads/simple/
Traceback (most recent call last):
  File "/home/miguel/virtualizacion/local/lib/python2.7/site-packages/django/core/handlers/base.py", line 149, in get_response
    response = self.process_exception_by_middleware(e, request)
  File "/home/miguel/virtualizacion/local/lib/python2.7/site-packages/django/core/handlers/base.py", line 147, in get_response
    response = wrapped_callback(request, *callback_args, **callback_kwargs)
  File "/home/miguel/virtualizacion/local/lib/python2.7/site-packages/django/views/decorators/csrf.py", line 58, in wrapped_view
    return view_func(*args, **kwargs)
  File "/home/miguel/myapp/object-detection-uploader/uploads/core/views.py", line 31, in simple_upload
    gps = json.loads(gps_str)  # 'gps' as dict (python)
  File "/usr/lib/python2.7/json/__init__.py", line 339, in loads
    return _default_decoder.decode(s)
  File "/usr/lib/python2.7/json/decoder.py", line 364, in decode
    obj, end = self.raw_decode(s, idx=_w(s, 0).end())
  File "/usr/lib/python2.7/json/decoder.py", line 380, in raw_decode
    obj, end = self.scan_once(s, idx)
ValueError: Expecting property name enclosed in double quotes: line 1 column 2 (char 1)

Is this a format issue?

What problem are you facing now?

JPG
– JPG

2018-08-18 04:45:48 +00:00
Commented Aug 18, 2018 at 4:45 — JPG
– JPG, Commented Aug 18, 2018 at 4:45
What is ur actual issue?

Hemadri Dasari
– Hemadri Dasari

2018-08-18 04:47:47 +00:00
Commented Aug 18, 2018 at 4:47 — Hemadri Dasari
– Hemadri Dasari, Commented Aug 18, 2018 at 4:47
@JerinPeterGeorge the Issue has been added

ambigus9
– ambigus9

2018-08-18 04:57:56 +00:00
Commented Aug 18, 2018 at 4:57 — ambigus9
– ambigus9, Commented Aug 18, 2018 at 4:57
are you using Django Rest Framework?

JPG
– JPG

2018-08-18 05:01:43 +00:00
Commented Aug 18, 2018 at 5:01 — JPG
– JPG, Commented Aug 18, 2018 at 5:01
@JerinPeterGeorge No, just Django 1.98

ambigus9
– ambigus9

2018-08-18 05:02:03 +00:00
Commented Aug 18, 2018 at 5:02 — ambigus9
– ambigus9, Commented Aug 18, 2018 at 5:02

JPG · Accepted Answer · 2018-08-18 05:35:21Z

1

from django.http import HttpResponse


@csrf_exempt
def simple_upload(request):
    gps_str = request.POST.get('gps', None)
    if gps_str is None:
        return HttpResponse("'gps' key not found in request payload")
    gps = json.loads(gps_str)  # 'gps' as dict (python)
    files = request.FILES  # you will get all files as dict like object



    return HttpResponse("some response")

answered Aug 18, 2018 at 5:35

JPG

89.4k24 gold badges164 silver badges235 bronze badges

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

8 Comments

user9245558 Over a year ago

I wouldn’t advise making a POST endpoint csrf exempt, unless you have something in place to monitor the usage of this endpoint and you understand the security implications (or have at least mitigated against them).

JPG Over a year ago

I'm not preferring that either. I focused on upload part of the view fucntion

user9245558 Over a year ago

Apologies - should have commented above.

ambigus9 Over a year ago

@JerinPeterGeorge After apply your solution currently i'm getting ValueError: Expecting property name enclosed in double quotes: line 1 column 2 (char 1)

JPG Over a year ago

Can you add the full traceback to the question?

|

Collectives™ on Stack Overflow

Receive JSON Object from ReactJS on my Django BackEnd

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related