How do I use File Handlers in Sweetalert?











up vote
0
down vote

favorite












I am very new to JavaScript so I am guessing, that this problem will be fairly simple for most of you guys (or at least I hope so...)



I have this SweetAlert Code. It asks the User to upload two images and one text. I am able to add the text to my database but I am struggling with the images... I know that I need to pass the Images using the File Handlers, but I don't know how...



This is my Server that I run my Code on: https://mars.iuk.hdm-stuttgart.de/~mk304/Web_Projekt/webpage/ui/sweetalert/sweetalert_eingabe.php



This is my SweetAlert2/JavaScript Code



<script>
var kuerzeltest = "mk304";
var channeltest = "3";

$(document).ready(function () {
$('#new-btn').click(function () {

swal.mixin({
input: 'text',
confirmButtonText: 'Next &rarr;',
showCancelButton: true,
progressSteps: ['1', '2', '3']
}).queue([
{
input: 'file',
title: 'Profilbild hochladen',
text: 'Empfohlen wird 1X1'
},
{
input: 'file',
title: 'Hintergrundbild hochladen',
text: 'Empfohlen wird 16X9'
},
{

title: 'Über mich',
text: ''
},

]).then((result) => {
if (result.value) {



$.ajax({ type: "POST", url: "../../register/profil_update.php",
data: {"post":result.value[2],"bild":result.value[0],"bild2":result.value[1], "kuerzel": kuerzeltest },

});
swal(
"Super!",
"Dein Profil wurde erfolgreich aktualisiert ",
"success"

)
}
})
});
})




and this is my backend code for the database






    <?php
include_once '../../userdata.php';
//Posts in Datenbank schreiben


$kuerzel = $_SESSION["kuerzel"];
$bild = $_POST["bild"];
$bild2 = $_POST["bild2"];
$post = $_POST["post"];

$pdo = new PDO ($dsn, $dbuser, $dbpass, array('charset'=>'utf8'));
$sql = "INSERT INTO user_bilder (kuerzel, bild, bild2, post) VALUES (?, ?, ?, ?)";

$statement = $pdo->prepare($sql);
$statement->execute(array("$kuerzel", "$bild", "$bild2", "$post"));

$row = $statement->fetchObject();

header("Location: ../home/home.php");

?>





this is a photo of my database



my database










share|improve this question






















  • Suggest you first learn how to do this using a simple form and do a search for "ajax upload" to learn how to use FormData API in javascript and $_FILES in php
    – charlietfl
    Nov 10 at 15:14












  • thank you so much for the advice! do you know a good tutorial :)?
    – Moritz Klug
    Nov 10 at 15:28










  • Shouldn't be hard to find them by searching things like "ajax upload php"
    – charlietfl
    Nov 10 at 15:32















up vote
0
down vote

favorite












I am very new to JavaScript so I am guessing, that this problem will be fairly simple for most of you guys (or at least I hope so...)



I have this SweetAlert Code. It asks the User to upload two images and one text. I am able to add the text to my database but I am struggling with the images... I know that I need to pass the Images using the File Handlers, but I don't know how...



This is my Server that I run my Code on: https://mars.iuk.hdm-stuttgart.de/~mk304/Web_Projekt/webpage/ui/sweetalert/sweetalert_eingabe.php



This is my SweetAlert2/JavaScript Code



<script>
var kuerzeltest = "mk304";
var channeltest = "3";

$(document).ready(function () {
$('#new-btn').click(function () {

swal.mixin({
input: 'text',
confirmButtonText: 'Next &rarr;',
showCancelButton: true,
progressSteps: ['1', '2', '3']
}).queue([
{
input: 'file',
title: 'Profilbild hochladen',
text: 'Empfohlen wird 1X1'
},
{
input: 'file',
title: 'Hintergrundbild hochladen',
text: 'Empfohlen wird 16X9'
},
{

title: 'Über mich',
text: ''
},

]).then((result) => {
if (result.value) {



$.ajax({ type: "POST", url: "../../register/profil_update.php",
data: {"post":result.value[2],"bild":result.value[0],"bild2":result.value[1], "kuerzel": kuerzeltest },

});
swal(
"Super!",
"Dein Profil wurde erfolgreich aktualisiert ",
"success"

)
}
})
});
})




and this is my backend code for the database






    <?php
include_once '../../userdata.php';
//Posts in Datenbank schreiben


$kuerzel = $_SESSION["kuerzel"];
$bild = $_POST["bild"];
$bild2 = $_POST["bild2"];
$post = $_POST["post"];

$pdo = new PDO ($dsn, $dbuser, $dbpass, array('charset'=>'utf8'));
$sql = "INSERT INTO user_bilder (kuerzel, bild, bild2, post) VALUES (?, ?, ?, ?)";

$statement = $pdo->prepare($sql);
$statement->execute(array("$kuerzel", "$bild", "$bild2", "$post"));

$row = $statement->fetchObject();

header("Location: ../home/home.php");

?>





this is a photo of my database



my database










share|improve this question






















  • Suggest you first learn how to do this using a simple form and do a search for "ajax upload" to learn how to use FormData API in javascript and $_FILES in php
    – charlietfl
    Nov 10 at 15:14












  • thank you so much for the advice! do you know a good tutorial :)?
    – Moritz Klug
    Nov 10 at 15:28










  • Shouldn't be hard to find them by searching things like "ajax upload php"
    – charlietfl
    Nov 10 at 15:32













up vote
0
down vote

favorite









up vote
0
down vote

favorite











I am very new to JavaScript so I am guessing, that this problem will be fairly simple for most of you guys (or at least I hope so...)



I have this SweetAlert Code. It asks the User to upload two images and one text. I am able to add the text to my database but I am struggling with the images... I know that I need to pass the Images using the File Handlers, but I don't know how...



This is my Server that I run my Code on: https://mars.iuk.hdm-stuttgart.de/~mk304/Web_Projekt/webpage/ui/sweetalert/sweetalert_eingabe.php



This is my SweetAlert2/JavaScript Code



<script>
var kuerzeltest = "mk304";
var channeltest = "3";

$(document).ready(function () {
$('#new-btn').click(function () {

swal.mixin({
input: 'text',
confirmButtonText: 'Next &rarr;',
showCancelButton: true,
progressSteps: ['1', '2', '3']
}).queue([
{
input: 'file',
title: 'Profilbild hochladen',
text: 'Empfohlen wird 1X1'
},
{
input: 'file',
title: 'Hintergrundbild hochladen',
text: 'Empfohlen wird 16X9'
},
{

title: 'Über mich',
text: ''
},

]).then((result) => {
if (result.value) {



$.ajax({ type: "POST", url: "../../register/profil_update.php",
data: {"post":result.value[2],"bild":result.value[0],"bild2":result.value[1], "kuerzel": kuerzeltest },

});
swal(
"Super!",
"Dein Profil wurde erfolgreich aktualisiert ",
"success"

)
}
})
});
})




and this is my backend code for the database






    <?php
include_once '../../userdata.php';
//Posts in Datenbank schreiben


$kuerzel = $_SESSION["kuerzel"];
$bild = $_POST["bild"];
$bild2 = $_POST["bild2"];
$post = $_POST["post"];

$pdo = new PDO ($dsn, $dbuser, $dbpass, array('charset'=>'utf8'));
$sql = "INSERT INTO user_bilder (kuerzel, bild, bild2, post) VALUES (?, ?, ?, ?)";

$statement = $pdo->prepare($sql);
$statement->execute(array("$kuerzel", "$bild", "$bild2", "$post"));

$row = $statement->fetchObject();

header("Location: ../home/home.php");

?>





this is a photo of my database



my database










share|improve this question













I am very new to JavaScript so I am guessing, that this problem will be fairly simple for most of you guys (or at least I hope so...)



I have this SweetAlert Code. It asks the User to upload two images and one text. I am able to add the text to my database but I am struggling with the images... I know that I need to pass the Images using the File Handlers, but I don't know how...



This is my Server that I run my Code on: https://mars.iuk.hdm-stuttgart.de/~mk304/Web_Projekt/webpage/ui/sweetalert/sweetalert_eingabe.php



This is my SweetAlert2/JavaScript Code



<script>
var kuerzeltest = "mk304";
var channeltest = "3";

$(document).ready(function () {
$('#new-btn').click(function () {

swal.mixin({
input: 'text',
confirmButtonText: 'Next &rarr;',
showCancelButton: true,
progressSteps: ['1', '2', '3']
}).queue([
{
input: 'file',
title: 'Profilbild hochladen',
text: 'Empfohlen wird 1X1'
},
{
input: 'file',
title: 'Hintergrundbild hochladen',
text: 'Empfohlen wird 16X9'
},
{

title: 'Über mich',
text: ''
},

]).then((result) => {
if (result.value) {



$.ajax({ type: "POST", url: "../../register/profil_update.php",
data: {"post":result.value[2],"bild":result.value[0],"bild2":result.value[1], "kuerzel": kuerzeltest },

});
swal(
"Super!",
"Dein Profil wurde erfolgreich aktualisiert ",
"success"

)
}
})
});
})




and this is my backend code for the database






    <?php
include_once '../../userdata.php';
//Posts in Datenbank schreiben


$kuerzel = $_SESSION["kuerzel"];
$bild = $_POST["bild"];
$bild2 = $_POST["bild2"];
$post = $_POST["post"];

$pdo = new PDO ($dsn, $dbuser, $dbpass, array('charset'=>'utf8'));
$sql = "INSERT INTO user_bilder (kuerzel, bild, bild2, post) VALUES (?, ?, ?, ?)";

$statement = $pdo->prepare($sql);
$statement->execute(array("$kuerzel", "$bild", "$bild2", "$post"));

$row = $statement->fetchObject();

header("Location: ../home/home.php");

?>





this is a photo of my database



my database






    <?php
include_once '../../userdata.php';
//Posts in Datenbank schreiben


$kuerzel = $_SESSION["kuerzel"];
$bild = $_POST["bild"];
$bild2 = $_POST["bild2"];
$post = $_POST["post"];

$pdo = new PDO ($dsn, $dbuser, $dbpass, array('charset'=>'utf8'));
$sql = "INSERT INTO user_bilder (kuerzel, bild, bild2, post) VALUES (?, ?, ?, ?)";

$statement = $pdo->prepare($sql);
$statement->execute(array("$kuerzel", "$bild", "$bild2", "$post"));

$row = $statement->fetchObject();

header("Location: ../home/home.php");

?>





    <?php
include_once '../../userdata.php';
//Posts in Datenbank schreiben


$kuerzel = $_SESSION["kuerzel"];
$bild = $_POST["bild"];
$bild2 = $_POST["bild2"];
$post = $_POST["post"];

$pdo = new PDO ($dsn, $dbuser, $dbpass, array('charset'=>'utf8'));
$sql = "INSERT INTO user_bilder (kuerzel, bild, bild2, post) VALUES (?, ?, ?, ?)";

$statement = $pdo->prepare($sql);
$statement->execute(array("$kuerzel", "$bild", "$bild2", "$post"));

$row = $statement->fetchObject();

header("Location: ../home/home.php");

?>






javascript ajax filehandle sweetalert2 photo-upload






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 10 at 15:09









Moritz Klug

85




85












  • Suggest you first learn how to do this using a simple form and do a search for "ajax upload" to learn how to use FormData API in javascript and $_FILES in php
    – charlietfl
    Nov 10 at 15:14












  • thank you so much for the advice! do you know a good tutorial :)?
    – Moritz Klug
    Nov 10 at 15:28










  • Shouldn't be hard to find them by searching things like "ajax upload php"
    – charlietfl
    Nov 10 at 15:32


















  • Suggest you first learn how to do this using a simple form and do a search for "ajax upload" to learn how to use FormData API in javascript and $_FILES in php
    – charlietfl
    Nov 10 at 15:14












  • thank you so much for the advice! do you know a good tutorial :)?
    – Moritz Klug
    Nov 10 at 15:28










  • Shouldn't be hard to find them by searching things like "ajax upload php"
    – charlietfl
    Nov 10 at 15:32
















Suggest you first learn how to do this using a simple form and do a search for "ajax upload" to learn how to use FormData API in javascript and $_FILES in php
– charlietfl
Nov 10 at 15:14






Suggest you first learn how to do this using a simple form and do a search for "ajax upload" to learn how to use FormData API in javascript and $_FILES in php
– charlietfl
Nov 10 at 15:14














thank you so much for the advice! do you know a good tutorial :)?
– Moritz Klug
Nov 10 at 15:28




thank you so much for the advice! do you know a good tutorial :)?
– Moritz Klug
Nov 10 at 15:28












Shouldn't be hard to find them by searching things like "ajax upload php"
– charlietfl
Nov 10 at 15:32




Shouldn't be hard to find them by searching things like "ajax upload php"
– charlietfl
Nov 10 at 15:32

















active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














 

draft saved


draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53240263%2fhow-do-i-use-file-handlers-in-sweetalert%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown






























active

oldest

votes













active

oldest

votes









active

oldest

votes






active

oldest

votes
















 

draft saved


draft discarded



















































 


draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53240263%2fhow-do-i-use-file-handlers-in-sweetalert%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Florida Star v. B. J. F.

Danny Elfman

Lugert, Oklahoma