Page 1 of 1
Upload an image
Posted: Wed Mar 12, 2025 9:10 pm
by 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.
Re: Upload an image
Posted: Thu Mar 13, 2025 6:09 am
by Caronte3D
Re: Upload an image
Posted: Thu Mar 13, 2025 6:45 am
by 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.
Re: Upload an image
Posted: Thu Mar 13, 2025 7:25 am
by 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
Re: Upload an image
Posted: Thu Mar 13, 2025 9:01 am
by 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?
Re: Upload an image
Posted: Thu Mar 13, 2025 10:42 am
by 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?
Re: Upload an image
Posted: Thu Mar 13, 2025 10:59 am
by 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.";
}
}
?>
Re: Upload an image
Posted: Thu Mar 13, 2025 1:05 pm
by 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
Re: Upload an image
Posted: Thu Mar 13, 2025 2:02 pm
by 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.
Re: Upload an image
Posted: Fri Mar 14, 2025 2:27 pm
by 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
