Upload image on json

[Yery cs]

I am going to upload image on json.

e.g Postman request.

{
    "username": "is690002",
    "password": "is690002",
    "first_name": "andres ",
    "last_name": "Barragan",
    "email": "te...@gmail.com",
    "userprofile": {
        "gender": "F",
        "phone_number": "3315854644",
        "photo": "/media/image.png"
    }
}

I noticed DRF doesn't support uploading file on json.
Is there anyway to implement it?

[Elico]

Hi,

You can upload a BASE64 encoded image, for example:

{

...

    "userprofile": {

        "gender": "F",

        "phone_number": "3315854644",

        "photo": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArwAAADICAYAAAAKljK9AAARbUlEQVR4Xu3dMayt2RQH8DWFSAgzzBAdMhIhIwShHEpCUKgodCphEtGilghKFYVGg9AoBFFIhGQkiGIKEjEhiGmYiYKs5Nt8Oe57787Juu+us77fSW7ufffds89av7Vn8r/7feecB8KNAAECBAgQIECAwGCBBwb3pjUCBAgQIECAAAECIfDaBAQIECBAgAABAqMFBN7R49UcAQIECBAgQICAwGsPECBAgAABAgQIjBYQeEePV3MECBAgQIAAAQICrz1AgAABAgQIECAwWkDgHT1ezREgQIAAAQIECAi89gABAgQIECBAgMBoAYF39Hg1R4AAAQIECBAgIPDaAwQIECBAgAABAqMFBN7R49UcAQIECBAgQICAwGsPECBAgAABAgQIjBYQeEePV3MECBAgQIAAAQICrz1AgAABAgQIECAwWkDgHT1ezREgQIAAAQIECAi89gABAgQIECBAgMBoAYF39Hg1R4AAAQIECBAgIPDaAwQIECBAgAABAqMFBN7R49UcAQIECBAgQICAwGsPECBAgAABAgQIjBYQeEePV3MECBAgQIAAAQICrz1AgAABAgQIECAwWkDgHT1ezREgQIAAAQIECAi89gABAgQIECBAgMBoAYF39Hg1R4AAAQIECBAgIPDaAwQIECBAgAABAqMFBN7R49UcAQIECBAgQICAwGsPECBAgAABAgQIjBYQeEePV3MECBAgQIAAAQICrz1AgAABAgQIECAwWkDgHT1ezREgQIAAAQIECAi89gABAgQIECBAgMBoAYF39Hg1R4AAAQIECBAgIPDaAwQIECBAgAABAqMFBN7R49UcAQIECBAgQICAwGsPECBAgAABAgQIjBYQeEePV3MECBAgQIAAAQICrz1AgAABAgQIECAwWkDgHT1ezREgQIAAAQIECAi89gABAgQIECBAgMBoAYF39Hg1R4AAAQIECBAgIPDaAwQIECBAgAABAqMFBN7R49UcAQIECBAgQICAwGsPECBAgAABAgQIjBYQeEePV3MECBAgQIAAAQICrz1AgAABAgQIECAwWkDgHT1ezREgQIAAAQIECAi89gABAgQIECBAgMBoAYF39Hg1R4AAAQIECBAgIPDaAwQIECBAgAABAqMFBN7R49UcAQIECBAgQICAwGsPECBAgAABAgQIjBYQeEePV3MECBAgQIAAAQICrz1AgAABAgQIECAwWkDgHT1ezREgQIAAAQIECAi89gABAgQIECBAgMBoAYF39Hg1R4AAAQIECBAgIPDaAwQIECBAgAABAqMFBN7R49UcAQIECBAgQICAwGsPECBAgAABAgQIjBYQeEePV3MECBAgQIAAAQICrz1AgAABAgQIECAwWkDgHT1ezREgQIAAAQIECAi89gABAgQIECBAgMBoAYF39Hg1R4AAAQIECBAgIPDaAwQIECBAgAABAqMFBN7R49UcAQIECBAgQICAwGsPECBAgAABAgQIjBYQeEePV3MECBAgQIAAAQICrz1AgAABAgQIECAwWkDgHT1ezREgQIAAAQIECAi89gABAgQIECBAgMBoAYF39Hg1R4AAAQIECBAgIPDaAwQIECBAgAABAqMFBN7R49UcAQIECBAgQICAwGsPECBAgAABAgQIjBYQeEePV3MECBAgQIAAAQICrz1AgAABAgQIECAwWkDgHT1ezREgQIAAAQIECAi89gABAgQIECBAgMBoAYF39Hg1R4AAAQIECBAgIPDaAwQIECBAgAABAqMFBN7R49UcAQIECBAgQICAwGsPECBAgAABAgQIjBYQeEePV3MECBAgQIAAAQICrz1AgAABAgQIECAwWkDgHT1ezREgQIAAAQIECAi89gABAgQIECBAgMBoAYF39Hg1R4AAAQIECBAgIPDaAwQIECBAgAABAqMFBN7R49UcAQIECBAgQICAwGsPECBA4GYEHoqI/Hh1RLxm+1jf+/v2kPn5d9vHLyNiff9mKrIqAQIEDiog8B508NomUCSQQS5D3IPb5/w6v5e3/Hp9Xt/bP+z+e/mzGfbuFPjy+2u9/c/8NSIePull/7jr8dd91t/t68uvn9zVug+jd2NaNf0xIl60q2/1dVXPd1vvTxHx9BZ+s54fRcSPi+ZkGQIECBxaQOA99Pg1T+D/BN6yhdf8vMLrOpXMH14nlf/YQt79JHxmF4pXQH4qIh7ZijgNxacBef/nffA9t4f1eL+NiFdtXissrwCdf86vV5jP09z9LwFZx7siIr0fi4hHrygmg++3I+LrToDPHZX7ESBwdAGB9+g7QP9HFMiQ9eYtvGbQyo8VZK/r8VxEPLv9cIa4/ens+mf6tdbp36/vX3WSugLhdeuY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gAABAgQI9BUQePvORmUECBAgQIAAAQIFAgJvAaIlCBAgQIAAAQIE+goIvH1nozICBAgQIECAAIECAYG3ANESBAgQIECAAAECfQUE3r6zURkBAgQIECBAgECBgMBbgGgJAgQIECBAgACBvgICb9/ZqIwAAQIECBAgQKBAQOAtQLQEAQIECBAgQIBAXwGBt+9sVEaAAAECBAgQIFAgIPAWIFqCAAECBAgQIECgr4DA23c2KiNAgAABAgQIECgQEHgLEC1BgAABAgQIECDQV0Dg7TsblREgQIAAAQIECBQICLwFiJYgQIAAAQIECBDoKyDw9p2NyggQIECAAAECBAoEBN4CREsQIECAAAECBAj0FRB4+85GZQQIECBAgAABAgUCAm8BoiUIECBAgAABAgT6Cgi8fWejMgIECBAgQIAAgQIBgbcA0RIECBAgQIAAAQJ9BQTevrNRGQECBAgQIECAQIGAwFuAaAkCBAgQIECAAIG+AgJv39mojAABAgQIECBAoEBA4C1AtAQBAgQIECBAgEBfAYG372xURoAAAQIECBAgUCAg8BYgWoIAAQIECBAgQKCvgMDbdzYqI0CAAAECBAgQKBAQeAsQLUGAAAECBAgQINBXQODtOxuVESBAgAABAgQIFAgIvAWIliBAgAABAgQIEOgrIPD2nY3KCBAgQIAAAQIECgQE3gJESxAgQIAAAQIECPQVEHj7zkZlBAgQIECAAAECBQICbwGiJQgQIECAAAECBPoKCLx9Z6MyAgQIECBAgACBAgGBtwDREgQIECBAgAABAn0FBN6+s1EZAQIECBAgQIBAgYDAW4BoCQIECBAgQIAAgb4CAm/f2aiMAAECBAgQIECgQEDgLUC0BAECBAgQIECAQF8BgbfvbFRGgAABAgQIECBQICDwFiBaggABAgQIECBAoK+AwNt3NiojQIAAAQIECBAoEBB4CxAtQYAAAQIECBAg0FdA4O07G5URIECAAAECBAgUCAi8BYiWIECAAAECBAgQ6Csg8PadjcoIECBAgAABAgQKBATeAkRLECBAgAABAgQI9BUQePvORmUECBAgQIAAAQIFAgJvAaIlCBAgQIAAAQIE+goIvH1nozICBAgQIECAAIECAYG3ANESBAgQIECAAAECfQUE3r6zURkBAgQIECBAgECBgMBbgGgJAgQIECBAgACBvgL/AUvLCtjq5XCXAAAAAElFTkSuQmCC"

    }

}

You can take this long text and paste it in the browser's address bar and you will see the picture.

Note that it starts with: data:image/png;base64,

You just have to find a way for your client to transform the image into a base64.

Eli

--
You received this message because you are subscribed to the Google Groups "Django REST framework" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-rest-fram...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-rest-framework/44bd3461-34c8-4328-80e9-af5540b20f37%40googlegroups.com.

[Yery cs]

How can I get image base 64 code?

To view this discussion on the web visit https://groups.google.com/d/msgid/django-rest-framework/CABQ7qCmo65UBkvbjHTZvw1DSOC%3DptNCfQbnpTM9a6zYbLFBu6g%40mail.gmail.com.

[Yery cs]

Generally, user select file in frontend.
If so, Should I convert image to base 64 in frontend and send it to backend?

[Elico]

Which client code you are using? Javascript?

To view this discussion on the web visit https://groups.google.com/d/msgid/django-rest-framework/CALCmTPHw%2BoN8eHqJ%3Dw0-1-5T-3GOcULcZ7EQKVDmjQRvjn1t0A%40mail.gmail.com.

[Yery cs]

Yes. ReactJS

To view this discussion on the web visit https://groups.google.com/d/msgid/django-rest-framework/CABQ7qCnuDWC9MVJqh08TJj-ZZg_dCq%3DPmbqjF8s-po%3DKo2FenA%40mail.gmail.com.

[Elico]

Try here

https://base64.guru/developers/javascript/examples/convert-image

To view this discussion on the web visit https://groups.google.com/d/msgid/django-rest-framework/CALCmTPHHTdN%2BpnQFHo-24XFtZPSQye%3DY%3DE_xJZYZQ0sTbBFtNw%40mail.gmail.com.

[Yery cs]

Thank you.

This answer is very helpful.

Regards!

To view this discussion on the web visit https://groups.google.com/d/msgid/django-rest-framework/CABQ7qCkTLq56nO-4nKLD%3DwJYX-nszCw8jumNu5SSMipfeRfw9w%40mail.gmail.com.

[Carl Nobile]

As a side note never put credentials in the body of a JSON request, this is considered to be a security risk as anything in the body can be logged. Use one of the methods that are described here https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication.

Basic authentication is the most common and you should always use TLS (SSL) encryption.

~Carl

To view this discussion on the web visit https://groups.google.com/d/msgid/django-rest-framework/CALCmTPHQLgZb%2BWeUYJnnq%3DvqAgQ6smGBqdyd%3DHY-uwv4vRFf0A%40mail.gmail.com.

--

-------------------------------------------------------------------------------
Carl J. Nobile (Software Engineer)
carl....@gmail.com
-------------------------------------------------------------------------------

[sathri mamatha]

Hi,

Iam trying to learn  API  in Django,

 Kindly,Help me.

[nsamba taufeeq]

See here https://stackoverflow.com/questions/20473572/django-rest-framework-file-upload

It's better practice to separate these.

Upload json meta data and image separately.

Images are sent via the FileApi on the browser or under formData as files.

If you are using curl for tests look into -F flag or option.

If you are using a browser look into the formData object and the FileApi.

to receive the uploaded image use request.FILES as in the stack overflow link above

--