so when I try to send files to Django server it raises ton of errors:

Traceback (most recent call last):
  File "C:\Users\TM\AppData\Local\Programs\Python\Python39\lib\site-packages\PIL\Image.py", line 2972, in open
    fp.seek(0)
AttributeError: 'NoneType' object has no attribute 'seek'

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "C:\Users\TM\AppData\Local\Programs\Python\Python39\lib\site-packages\asgiref\sync.py", line 482, in thread_handler
    raise exc_info[1]
  File "C:\Users\TM\AppData\Local\Programs\Python\Python39\lib\site-packages\django\core\handlers\exception.py", line 38, in inner
    response = await get_response(request)
  File "C:\Users\TM\AppData\Local\Programs\Python\Python39\lib\site-packages\django\core\handlers\base.py", line 233, in _get_response_async
    response = await wrapped_callback(request, *callback_args, **callback_kwargs)
  File "C:\Users\TM\AppData\Local\Programs\Python\Python39\lib\site-packages\asgiref\sync.py", line 444, in __call__
    ret = await asyncio.wait_for(future, timeout=None)
  File "C:\Users\TM\AppData\Local\Programs\Python\Python39\lib\asyncio\tasks.py", line 442, in wait_for
    return await fut
  File "C:\Users\TM\AppData\Local\Programs\Python\Python39\lib\concurrent\futures\thread.py", line 52, in run
    result = self.fn(*self.args, **self.kwargs)
  File "C:\Users\TM\AppData\Local\Programs\Python\Python39\lib\site-packages\asgiref\sync.py", line 486, in thread_handler
    return func(*args, **kwargs)
  File "C:\Users\TM\AppData\Local\Programs\Python\Python39\lib\site-packages\django\views\decorators\csrf.py", line 54, in wrapped_view
    return view_func(*args, **kwargs)
  File "C:\Users\TM\سطح المكتب\New folder\web\views.py", line 86, in makeAccountApi
    IMG=RESIZE(Image)
  File "C:\Users\TM\سطح المكتب\New folder\web\helpers.py", line 110, in RESIZE
    im = Image.open(Img)
  File "C:\Users\TM\AppData\Local\Programs\Python\Python39\lib\site-packages\PIL\Image.py", line 2974, in open
    fp = io.BytesIO(fp.read())
AttributeError: 'NoneType' object has no attribute 'read'

when I print request.body and request files and request POST it prints:

b'[object FormData]'
<MultiValueDict: {}>
<QueryDict: {}>

when I print file it console.log:

C:\fakepath\download.jpg

and after it it console.log:

request.js:62 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
PostData @ request.js:62
sumbit @ login.js:8
(anonymous) @ VM103:1
request.js:64 POST http://127.0.0.1:8000/api/makeuser/dsa/ 400 (Bad Request)

and I also didn't make button to trigger the function so I trigger the function from the console enter image description here

enter image description here

-------------CODES SECTION: for request function:

function PostData(url, method="get", data="") {

    url=url.toString();
    method=method.toString();
    data=data.toString();

//CHECK CSRF-Token

    function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i  ) {
            var cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length   1) === (name   '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length   1));
                break;
            }
        }
    }
    return cookieValue;
}

//Check if there is a hidden csrf-input-field, if so, get the value

try {
    var csrffield = document.getElementsByTagName("input");

    var l = csrffield.length;
    var i=0;

while (true) {
    if (i > l) {
        break;
    }

    if (csrffield[i].name.toLowerCase().includes("csrf") == true) {
        csrftoken=csrffield[i].value;
        break;
    }
    i  ;
}}
catch (err) {
    var csrftoken = getCookie('csrftoken');


}

    var req = new XMLHttpRequest();

    if (method == "get" || method == "GET" || method == "Get") {

        req.open("GET", url, false);
        req.send();
    if (req.status == 200) {
        return req.responseText;
}}

if (method == "post" || method == "POST" || method == "Post") {

    req.open("POST", url, false);
    req.setRequestHeader('Content-Type','multipart/form-data')
    req.send(data);



    return req.responseText;
}}

for the sumbit function:

function sumbit() { 
    var errorhandler = document.getElementById("Error")
    var user = document.getElementById("user").value;
    var file = document.getElementById("pfp").value;
    console.log(file,user)
    var formData = new FormData();   
    formData.append("Image",file);
    request = PostData(`http://127.0.0.1:8000/api/makeuser/${user}/`,'POST',formData)
    if(request == "555") { 
        errorhandler.innerHTML = "Image or User required to make account";
    }
    else if(request=="556") { 
        errorhandler.innerHTML = "User already in use";

    }
    else if(request=="Made") {
        window.location= "http://127.0.0.1:8000/joinroom/"

    }else { 
        errorhandler.innerHTML = "Unkown error";


    }



}

here is full version of the views.py:

from django.http.response import HttpResponse
from django.shortcuts import render
from .models import rooms,accounts



from .helpers import RESIZE,file_size,BasicToken #Importing helpers functions 



from django.utils.crypto import get_random_string
from django.views.decorators.csrf import csrf_exempt









# Create your views here.
def login(request):
    return render(request,'loginpage.html')

def makeroom(request):
    return render(request,'makeroom.html')


def joinroom(request):
    return render(request,'joinroom.html')


def chatroom(request,ID):
    return render(request,'chatroom.html')


#Api

#this Api makes chatting rooms 
def makeroomApi(request):
    Name = 'dd'
    namegenerated=False

    #Here the ID generated
    while(namegenerated==False) : 
            Name  = get_random_string(length=6)   


            try :
                rooms.objects.get(roomid=Name)
                namegenerated=False                
            except:
                namegenerated=True
                pass

            

    room = rooms(roomid=Name)
    room.save()
    return HttpResponse(Name)


#this Api makes chatting rooms 
@csrf_exempt
def makeAccountApi(request,User):
    print(request.body)
    print(request.FILES)
    ## 555 error means that theres data we need that is not in our request
    ## 12 means that method is not post
    ## 556 mean that user is already available
    ## 212 means that file's size is big
    try:
        if  User.isspace():
            print(User.isspace())
            print("555")
            return HttpResponse("555")
    except: 
            print("555")
            return HttpResponse("555")

    if request.method == 'POST':
        Image=request.FILES.get("Image")
        print(request.body)
        IMG=RESIZE(Image)
        token=BasicToken()
        if file_size(Image,2) == 1: 
            print('33')
            return HttpResponse("212")

        #Handling if the same user is used by some one 
        try:
            accounts.objects.get(user=User)
            print("user in use")
            return HttpResponse('556')
        except:
            #if the user is not available then save to database
            room = accounts(user=User,image=IMG,token=token)
            room.save()
        print("made")
        return HttpResponse('Made')
    else: 
        return HttpResponse("12")

here is simpled version of views.py:

The request function

@csrf_exempt
def makeuser(request,User):
    if request.method == 'POST':
        Image=request.FILES.get("Image")
        print(request.body)
        IMG=RESIZE(Image)
        token=BasicToken()
        if file_size(Image,2) == 1: 
            print('33')
            return HttpResponse("212")

        #Handling if the same user is used by some one 
        try:
            accounts.objects.get(user=User)
            print("user in use")
            return HttpResponse('556')
        except:
            #if the user is not available then save to database
            room = accounts(user=User,image=IMG,token=token)
            room.save()
        print("made")
        return HttpResponse('Made')

Image handling function:

def RESIZE(Img):
    mask = Image.open(Mask).convert('L')
    im = Image.open(Img)
    outputimage = ImageOps.fit(im, mask.size, centering=(0.5, 0.5))
    outputimage.putalpha(mask)

    #Convering the image to django file so we can upload it to our database
    image_io = io.BytesIO()
    outputimage.save(image_io, format='png')
    outputimage = '{}.{}'.format('filename','.png')
    image = ContentFile(image_io.getvalue(), outputimage)
    return image

my full HTML code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/x-icon" href="http://127.0.0.1:8000/files/Logo.ico" />


    <meta name="keywords" content="chat,chatting,roomchat,groupchat,group">
    <meta name="description" content="Free chatting website! 
    you can chat now with ur friends with our rooms chat service">
    <meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png">
    <meta property="og:description" content="Free chatting website! 
    you can chat now with ur friends with our rooms chat service">
    <meta property="og:title" content="Chatting">
    <style>
     @import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300&display=swap');
     div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
    h1 { 
        font-family: "Almarai";


    }
    .inputimage {

 
        margin: 5px;
    font-size: larger;
    padding-left: 10%;
    }
    .inputuser{
        border: 0px;
    padding: 3px;
    border-bottom: 5px solid RGB(0,0,0,33%);
    font-size: 20px;
    font-family: "Almarai";
 
    }
    .inputuser:focus {
        font-size: 22px;
        outline: none;
    }
    .sumbitbutton {  
      margin:10px;
      color:black;
      background-color: transparent;
      border-color: black;
      border-style: solid;
      border-width: 2px;
      width: 17vh;
      min-width: 179px;
      font-size: 32px;
      border-radius: 20px;
      cursor: pointer;
    }
    .sumbitbutton:hover { 
      background-color:black;
      color:white;
    }

</style>
    <title>Login page</title>
  </head>
  <body>

    <div>
          <form action = "http://127.0.0.1:8000/api/makeuser/taha/" method = "POST">
            <h1 id="Error"></h1>
            <input type='text' id="user" autofocus placeholder="Username" class="inputuser">
            <h1>Your PFP</h1>
            <input type="file" id="pfp" alt="" class="inputimage"  accept=".jpg,.png">
            <input type="submit">
            </form>
        </div>


        <script type="text/javascript" src="http://127.0.0.1:8000/files/request.js"></script>
        <script type="text/javascript" src="http://127.0.0.1:8000/files/login.js"></script>

  </body>
</html>

CodePudding user response：

Don't convert your data to a string

url=url.toString();  // url is already a string, don't do this
method=method.toString(); // method is already a string, don't do this
data=data.toString();  // don't convert data to a string, if it needed to be a string it should have been passed as a string(It doesn't). Don't do this 

Also, do not set the content-type header for multipart/form-data, it will be set correctly and automatically.
You are using synchronous ajax, which is why you get that deprecation warning. This will cause a horrible user experience, especially with a file upload. If you want to keep the flow of your code you can take a look at async/await, Promises and Fetch API.