Upload an image

[Stefan]

I saw in this forum that it's possible to upload images to a website using SpiderBasic.

But I don't really understand it.

Can someone please give me step-by-step instructions with an example?

I would be very grateful.

[Caronte3D]

Take a look:
viewtopic.php?t=2011

[Stefan]

Is this the upload.php?

Code: Select all

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

if(!empty($_FILES['file'])) {
	echo "The file ".  basename( $_FILES['file']['name']). " has been uploaded";
}

Do I have to save these lines as upload.php?
And where does this file go? I copied it to my homepage. But it doesn't work.

[Caronte3D]

That php is incomplete.
Try this from w3schools:

Code: Select all

<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
  $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
  if($check !== false) {
    echo "File is an image - " . $check["mime"] . ".";
    $uploadOk = 1;
  } else {
    echo "File is not an image.";
    $uploadOk = 0;
  }
}
?>

EDITED: SEE MY NEXT POST

[Stefan]

I get the error and false messages in the debug window.
I don't know what's wrong.
Do I need to copy the PHP file to the root page of my website? And what read and write permissions does my website need then?
How can I control where the image should be loaded on my website?

[Dirk Geppert]

Hello Stefan,

what exactly do you want to do?

Is it enough for you to upload a file somewhere with the WebClient (SpiderBasic)?

Or do you also need the server-side processing? So with Purebasic and CGI for example?

[Caronte3D]

Here you have a complete example (tested and working).
You need a directory called: Uploads with write access rights.

SpiderBasic:

Code: Select all

EnableExplicit

Enumeration
  #Button
EndEnumeration

EnableJS
function uploadImage() {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = 'image/*';
  input.onchange = (e) => {
    const file = e.target.files[0];
    if (file) {
      const formData = new FormData();
      formData.append('image', file);
      fetch('uploadimage.php', { method: 'POST', body: formData })
        .then(response => {
          if (response.ok) {
            alert("Imagen uploaded!");
          } else {
            alert("Error uploading!");
          }
        })
        .catch(error => console.error('Error:', error));
    }
  };
  input.click();
}
window.uploadImage=uploadImage;
DisableJS

If ContainerMobile(#PB_Any, #PB_Mobile_Page, "", "")
  ButtonMobile(#Button,"Select & Upload Image")
  CloseMobileContainer()
EndIf

Procedure MobileEvents()  
  Select EventMobile()
    Case #Button
      ! uploadImage();
  EndSelect  
EndProcedure

BindEvent(#PB_Event_Mobile, @MobileEvents())

PHP uploadimage.php

Code: Select all

<?php
$upload_dir = "uploads/";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (isset($_FILES["image"]) && $_FILES["image"]["error"] == 0) {
        $file_name = basename($_FILES["image"]["name"]);
        $target_file = $upload_dir . $file_name;
        $image_file_type = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));
        $allowed_types = ["jpg", "jpeg", "png", "gif"];

        // Verify if the file is an image
        $check = getimagesize($_FILES["image"]["tmp_name"]);
        if ($check === false) {
            echo "The file is not an image.";
            exit;
        }

        // Validate the file type
        if (!in_array($image_file_type, $allowed_types)) {
            echo "Only JPG, JPEG, PNG, and GIF files are allowed.";
            exit;
        }

        // Move the file to the destination folder
        if (move_uploaded_file($_FILES["image"]["tmp_name"], $target_file)) {
            echo "The image has been successfully uploaded: <a href='$target_file'>$file_name</a>";
        } else {
            echo "There was an error uploading the file.";
        }
    } else {
        echo "No file was selected or an error occurred.";
    }
}
?>

[Stefan]

I tried this

Code: Select all

fetch('uploadimage.php', { method: 'POST', body: formData })

and this

Code: Select all

fetch('/uploadimage.php', { method: 'POST', body: formData })

and this

Code: Select all

fetch('https://myhomepage.de/uploadimage.php', { method: 'POST', body: formData })

Always the message: error uploading

[Caronte3D]

You don't need to change anything, the example works as is.
Simply put the file uploadimage.php in the same place the SB app is, also you need the folder "Uploads" in that place.
Then, run with: yourserver.com/yourSBapp.html

If that not work for you I don't know why.

[Stefan]

It works!
I didn't realize I still had to install and configure PHP.
A little warning that it wouldn't work in the Spiderbasic IDE would have saved me a lot of time and some gray hair

Thank you for your help