[JSON & HTML] Afbeelding uploaden en weergeven

Die aanroep moet je in je PHP-script verwerken, en bijv. met [php]file_get_contents[/php] aanroepen. Ik denk zelf dat je de afbeelding tijdelijk even moet cachen op je eigen server, zodat de externe partij het zelf over kan nemen.

Deze uitput haal je door [php]json_decode[/php]. Dan heb je in img_url de URL van je afbeelding die je in je MySQL-database kan verwerken.

- Ariën - op 30/04/2017 19:01:11

Heb je al de output al eens door [php]json_decode[/php] gehaald? Dan heb je in img_url de URL van je afbeelding die je in je MySQL-database kan verwerken.

Dat had ik inderdaad al door. Alleen, hoe doe ik dat en hoe voorkom ik dat de bezoeker de JSON ook te zien krijgt bij het uploaden van een afbeelding?

Door die URL onder-water aan te roepen. Zie mijn edit.
De gebruiker heeft niks aan die JSON-informatie, en vooral niet omdat er een delete-key wordt meegestuurd.

- Ariën - op 30/04/2017 19:01:11

Die aanroep moet je in je PHP-script verwerken, en bijv. met [php]file_get_contents[/php] aanroepen. Ik denk zelf dat je de afbeelding tijdelijk even moet cachen op je eigen server, zodat de externe partij het zelf over kan nemen.

Dank je wel voor de respons. Hoe doe ik dat die afbeelding cachen?


[size=xsmall]Toevoeging op 30/04/2017 19:05:38:[/size]

- Ariën - op 30/04/2017 19:04:25

Door die URL onder-water aan te roepen. Zie mijn edit.

Het probleem is dat de url niet werkt als er niets wordt geupload

http://uploads.im/api?upload&resize_width=350 geeft dan gewoon volgende JSON

{"status_code":403,"status_txt":"bad request"}

[size=xsmall]Toevoeging op 30/04/2017 19:06:25:[/size]

- Ariën - op 30/04/2017 19:04:25

De gebruiker heeft niks aan die JSON-informatie, en vooral niet omdat er een delete-key wordt meegestuurd.

Dat snap ik, maar ik zou de gebruiker graag op mijn website houden en niet doorsturen naar de JSON pagina van uploads.im hoe doe ik dat?

Kijk eens naar deze URL:
http://php.net/manual/en/features.file-upload.php

Eerst lijkt het mij logisch dat je de afbeelding zelf tijdelijk gaat opslaan. En dan doe je onder-water een POST-request naar upload.im.

Zoiets zal het dan wel worden (ongetest!):
[code]
<?php
$url = 'http://uploads.im/api?upload&resize_width=350';
$data = array('iets' => 'dit', 'nogwat' => 'dat'); // check de API-documentatie over welke data er gevraagd wordt.

$options = array(
'http' => array(
'header' => "Content-type: application/x-www-form-urlencoded\r\nEnctype:multipart/form-data",
'method' => 'POST',
'content' => http_build_query($data)
)
);
$context = stream_context_create($options);
$result = file_get_contents($url, false, $context);
if ($result === FALSE) {
// error!
} else {
// gelukt
}

// kijken wat er gebeurt.
var_dump($result);
?>

- Ariën - op 30/04/2017 19:20:51

Kijk eens naar deze URL:
http://php.net/manual/en/features.file-upload.php

Eerst lijkt het mij logisch dat je de afbeelding zelf tijdelijk gaat opslaan. En dan doe je onder-water een POST-request naar upload.im.

Zoiets zal het dan wel worden (ongetest!):

<?php
$url = 'http://uploads.im/api?upload&resize_width=350';
$data = array('iets' => 'dit', 'nogwat' => 'dat'); // check de API-documentatie over welke data er gevraagd wordt.

$options = array(
    'http' => array(
        'header'  => "Content-type: application/x-www-form-urlencoded\r\nEnctype:multipart/form-data",
        'method'  => 'POST',
        'content' => http_build_query($data)
    )
);
$context  = stream_context_create($options);
$result = file_get_contents($url, false, $context);
if ($result === FALSE) {
	// error!
} else {
	// gelukt
}

// kijken wat er gebeurt.
var_dump($result);
?>

Dank je we, hier kan ik al wat mee.
Denk echter niet dat dit zal werken aangezien je geen url meegeeft aan de upload variabele in de url.

$url = 'http://uploads.im/api?upload&resize_width=350';

moet zoiets worden

$url = 'http://uploads.im/api?upload=http://afbeeldingsurl.com&resize_width=350';

Of zie ik dat verkeerd?

Ik snap ook niet echt welke data ik zou moeten meegeven in de array.

Ik had zelf het voglende al bekomen:

<?php
$imgdata = json_decode($response, true);
echo $imgdata["data"]["img_url"];
?>

maar dan moet ik op een of andere manier natuurlijk wel aan die $response komen en ik heb geen idee hoe dit te doen ...

Je moet inderdaad de URL van je foto gebruiken, maar het is netter om de URL netjes op te bouwen met [php]http_build_query[/php].

<?php
$url = 'http://uploads.im/api';
$data = array('upload' => $file_path, 'resize_width' => '350');
/* hier de rest */
?>

$file_path moet je zelf even vullen met de locatie waar je jouw bestand na uploaden tijdelijk hebt opgeslagen op je server.

- Ariën - op 30/04/2017 19:38:50

Je moet inderdaad de URL van je foto gebruiken, maar het is netter om de URL netjes op te bouwen met [php]http_build_query[/php].

<?php
$url = 'http://uploads.im/api';
$data = array('upload' => $file_path, 'resize_width' => '350');
/* hier de rest */
?>

$file_path moet je zelf even vullen met de locatie waar je jouw bestand na uploaden tijdelijk hebt opgeslagen op je server.

Dank je wel, ik denk dat het zal lukken :)
Alleen, hoe doe ik dat tijdelijk opslaan van die afbeelding? Ik kan een afbeelding wel uploaden maar hoe verwijder ik die dan ook weer? Op die link die je me stuurde vind ik niet zo veel relevante info ...

[php]unlink[/php]
Uiteraard nadat alles bij Uploads.im gelukt is (status_txt == "OK")

- Ariën - op 30/04/2017 19:46:49

[php]unlink[/php]
Uiteraard nadat alles bij Uploads.im gelukt is (status_txt == "OK")

Ben al heel wat verder geraakt. Het uploaden van een afbeelding lukt, het binnenkrijgen van de JSON echter niet.

Dit zijn de var dumps die ik krijg bij het uploaden van profiel.png

File is an image - image/png.The file profiel.png has been uploaded.string(46) "{"status_code":403,"status_txt":"bad request"}"

Dit is al mijn code:

<?php

ini_set('display_errors', 'On');
error_reporting(E_ALL | E_STRICT);

$conn = new mysqli('localhost', '', '', '');

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = 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;
    }
}
// Check if file already exists
if (file_exists($target_file)) {
    echo "Sorry, file already exists.";
    $uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 10000000) {
    echo "Sorry, your file is too large.";
    $uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg") {
    echo "Sorry, only JPG, JPEG & PNG files are allowed.";
    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
    } else {
        echo "Sorry, there was an error uploading your file.";
    }
}

$file_path = 'http://crasharenaturbostars.com/designs/uploads/'. basename($_FILES["fileToUpload"]["name"]).'.'.$imageFileType;
$url = 'http://uploads.im/api?upload='. $file_path. '&resize_width=350';
$data = array('upload' => $file_path, 'resize_width' => '350');

$options = array(
    'http' => array(
        'header'  => "Content-type: application/x-www-form-urlencoded\r\nEnctype:multipart/form-data",
        'method'  => 'POST',
        'content' => http_build_query($data)
    )
);

$context  = stream_context_create($options);
$result = file_get_contents($url, false, $context);
if ($result === FALSE) {
    // error!
} else {
    // gelukt
}

// kijken wat er gebeurt.
var_dump($result);
echo "s";

}

?>

<?php include($_SERVER['DOCUMENT_ROOT'].'/header.php'); ?>
<h2>Designs</h2>

<?php

$sql2 = "SELECT image FROM designs";
if($result2 = $conn->query($sql2)) {

while($row = mysqli_fetch_assoc($result2)) {

?>
<img src="<?php echo $row["image"]; ?>" width="350" class="designimage">
<?php
}
}
?>

<div id="upload">
<br/>
<b>Upload</b><br/>

<form method="POST" action="" enctype="multipart/form-data">
Make a screenshot from your design in edit mode and upload it here.<br/>
    <input type="file" name="fileToUpload" id="fileToUpload" /><br/><br/>
    <input type="submit" value="Upload design" name="submit" class="button">
</form>


</div>
<?php include($_SERVER['DOCUMENT_ROOT'].'/footer.php');?>

[size=xsmall]Toevoeging op 30/04/2017 20:48:51:[/size]

Heb $url gecheckt en deze klopt zeker.

[size=xsmall]Toevoeging op 30/04/2017 21:01:01:[/size]

Het voglende bleek wel te werken, dit geeft me de json :)

<?php
$str = file_get_contents($url);
$json = json_decode($str, true);
echo '<pre>' . print_r($json, true) . '</pre>';
?>