Share your advanced knowledge/code with the community.
User avatar
Peter
 
Posts: 774
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080

Simple Fileupload

by Peter Thu Jun 11, 2020 2:32 pm

Code: Select all
Procedure UploadFileCallback(Success, Filename.s, Result.s)
 
  Debug "UploadFileCallback('" + Filename + "'):"
  Debug Success
  Debug Result
  Debug "----------------------------"
 
EndProcedure

Procedure UploadFile(URL.s, File, Callback)
 
  Protected FileToUpload
  Protected Filename.s
 
  ! v_filetoupload = spider.file.objects.Get(v_file).localFile;
 
  ! v_filename     = v_filetoupload.name;
 
  Debug "Uploading " + Filename + "..."
 
  ! var formData = new FormData();
 
  ! formData.append('file', v_filetoupload);
 
  ! $.ajax({
  !   url: v_url,
  !   data: formData,
  !   contentType: false,
  !   processData: false,
  !   method: 'POST',
  !   type: 'POST',
  !   success: function(response)           { v_callback(true,  v_filename, response) },
  !   error:   function(xhr, status, error) { v_callback(false, v_filename, xhr.statusText) },
  ! });
 
EndProcedure

Procedure ReadCallback(Status, Filename.s, File, Size)
 
  If Status = #PB_Status_Loaded
   
    Debug "File: " + Filename.s + " / Size: " + Size + " bytes"
    UploadFile("[YourUpload].php", File, @UploadFileCallback()) ; <-- adjust the path to your upload-component!
    CloseFile(File)
   
  ElseIf Status = #PB_Status_Error
   
    Debug "Error when loading the file: " + Filename$
   
  EndIf
 
EndProcedure

Procedure OpenFileRequesterCallback()
  While NextSelectedFile()
    ReadFile(#PB_Any, SelectedFileID(), @ReadCallback(), #PB_LocalFile)
  Wend
EndProcedure

Procedure ChooseFileEvent()
  OpenFileRequester("*.*", @OpenFileRequesterCallback(), #PB_Requester_MultiSelection)
EndProcedure

OpenWindow(0, 0, 0, 300, 50, "Upload file example", #PB_Window_ScreenCentered)
ButtonGadget(0, 10, 10, 280, 30, "Choose file(s)...")

BindGadgetEvent(0, @ChooseFileEvent())


Example upload.php (dummy):

Code: Select all
<?php
header("Access-Control-Allow-Origin: *");

if(!empty($_FILES['file'])) {
   echo "The file ".  basename( $_FILES['file']['name']). " has been uploaded";
}
Dirk Geppert
 
Posts: 183
Joined: Fri Sep 22, 2017 7:02 am

Re: Simple Fileupload

by Dirk Geppert Fri Jun 12, 2020 1:42 pm

Hello Peter, thank you very much for the upload example.
What I have to do, to add add an own parameter to the Http header to, e.g. a SessionID?

Best regards
Dirk
User avatar
Peter
 
Posts: 774
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080

Re: Simple Fileupload

by Peter Fri Jun 12, 2020 2:43 pm

Dirk Geppert wrote:What I have to do, to add add an own parameter to the Http header to, e.g. a SessionID?


if I understand you correctly, this is how you can do it:

Code: Select all
Protected YourSessionID.s = "12345"

! var formData = new FormData();
! formData.append('file', v_filetoupload);

! formData.append('SessionID', v_yoursessionid); // <- here


and on server side:
Code: Select all
$YourSessionID = $_POST["SessionID"];


respectively:
Code: Select all
YourSessionID.s = CGIParameterValue("SessionID")
(if I remember correctly)
Dirk Geppert
 
Posts: 183
Joined: Fri Sep 22, 2017 7:02 am

Re: Simple Fileupload

by Dirk Geppert Sun Jun 14, 2020 9:55 am

Hi Peter, thx, I've tried it that way too. But the value SessionID will not added in the request header.
It will be included in the Post Data, in this case:

Code: Select all
-----------------------------9733649934111991961716185548
Content-Disposition: form-data; name="SessionID"

12345
-----------------------------9733649934111991961716185548--


Edit: I found it. It works with headers:

Code: Select all
Procedure UploadFile(URL.s, File, Callback)
 
  Protected FileToUpload
  Protected Filename.s
  Protected YourSessionID.s = "12345"
 
  ! v_filetoupload = spider.file.objects.Get(v_file).localFile;
 
  ! v_filename     = v_filetoupload.name;
 
  ! var formData = new FormData();
 
  ! formData.append('file', v_filetoupload);
 
  ! $.ajax({
  !   url: v_url,
  !   data: formData,
  !   headers: { 'SessionID' : v_yoursessionid },
  !   contentType: false,
  !   processData: false,
  !   method: 'POST',
  !   type: 'POST',
  !   success: function(response)           { v_callback(true,  v_filename, response) },
  !   error:   function(xhr, status, error) { v_callback(false, v_filename, xhr.statusText) },
  ! });
 EndProcedure
Dirk Geppert
 
Posts: 183
Joined: Fri Sep 22, 2017 7:02 am

Re: Simple Fileupload

by Dirk Geppert Wed Jul 22, 2020 12:54 pm

It doesn't work that way, bcoz the browser then makes a CORS query:

Code: Select all
Access-Control-Request-Headers: sessionid


and this leads to an error: "Kopfzeile 'sessionid' ist aufgrund der Kopfzeile 'Access-Control-Allow-Headers' aus der CORS-Preflight-Antwort nicht zulässig"

Pity it would have been so easy. :(
Dirk Geppert
 
Posts: 183
Joined: Fri Sep 22, 2017 7:02 am

Re: Simple Fileupload

by Dirk Geppert Tue Sep 15, 2020 2:05 pm

Okay. This problem can also be solved easily. On the server side you have to confirm that you support the type: SessionID via "Access-Control-Allow-Headers"

But how do I get the header from the post on the server with CGI?

Tried it with CGIVariable("SessionID") and CGIParameterName(), but no success.
Return to Tricks 'n' Tips

Who is online

Users browsing this forum: No registered users and 1 guest