Share your advanced knowledge/code with the community.
User avatar
Peter
 
Posts: 755
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: 180
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: 755
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: 180
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: 180
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. :(
Return to Tricks 'n' Tips

Who is online

Users browsing this forum: No registered users and 2 guests