Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2012-09-11 18:05:59

sacripant
Plugin Author
From: Rhône — France
Registered: 2008-06-01
Posts: 479
Website

[fr-fr] solution pour upload de fichiers depuis le front ?

bonjour à tous,

Je cherche une solution pour proposer un upload de fichiers, compatible avec le system de fichier de textpattern depuis le front.

Seul des utilisateurs identifiés à l’aide de cbe_frontauth pourront accéder au formulaire de soumission.

J’ai lu qu’il existait le plug’in sed_afu mais steve lui même déconseille son utilisation. Pourquoi ? problèmes de sécurité ?
Et le plugin n’est plus disponible.

mem_form possèderait les briques nécessaires pour un upload de fichier mais il faut pour cela écrire un plugin (d’après ce que j’ai compris). Je n’en ai pas les compétences et aucun développeur de plugin ne l’aurait fait ?

J’ai essayé de regarder vers des codes annexes, comme Jquery-File-Upload mais je ne vois pas comment le faire cohabiter avec textpattern et enregistrer les infos dans la bdd.

Voilà si quelqu’un aurait une piste pour m’aiguiller, une solution à me proposer. Merci.

Last edited by sacripant (2012-09-11 18:06:47)

Offline

#2 2012-09-12 11:09:33

Dragondz
Moderator
From: Algérie
Registered: 2005-06-12
Posts: 1,538
Website GitHub Twitter

Re: [fr-fr] solution pour upload de fichiers depuis le front ?

Salut scripant

J’ai fait un upload d’image du front end, je pense que tu peux adapter le code à tes besoins, le plugin fonctionne avec mem_form

envoie moi ton mail que je puisse te les envoyer.

A+

Offline

#3 2012-10-22 18:28:11

sacripant
Plugin Author
From: Rhône — France
Registered: 2008-06-01
Posts: 479
Website

Re: [fr-fr] solution pour upload de fichiers depuis le front ?

Bon j’ai bidouillé un truc.

  1. J’ai essayé de modifier le code envoyé par Dragondz mais je sans succès.
  2. J’ai essayé avec sed_afu. Mais ce plugin n’étant plus maintenu, je n’ai pas réussi à le faire fonctionner avec txp 4.5+
  3. Mes compétences en php sont inexistantes. Et je n’ai aucune envie de creuser ce language. J’ai déjà bien trop à faire avec le trio html/css/Js.

Voici donc ma bidouille. Je n’ai aucune idée de ce qu’elle vaut niveau sécurité.
Tout ce que je peux vous dire c’est que ce formulaire n’est accessible qu’aux users enregistrés (protéger avec cbe_frontauth).

L’idée :
un simple formulaire html dont les données sont envoyés via ajax à un external_output form.

J’ai récupérer un code php d’envoi de fichier sur le net et j’ai mélanger avec des balises Txp.

Le formulaire html :

	<form method="post" action="<txp:site_url />?rah_external_output=upload-files" enctype="multipart/form-data" id="attach-file-form">
		<fieldset>
			<legend>Envoyer un fichier</legend>

			<input type="hidden" name="file_id-projet" id="file_id-projet" value="<txp:article_id />" />

			<div class="form-12-12">     
				<label for="fichier">Fichier <span class="small">(max. 5 Mo)</span>&nbsp;:</label>
				<input type="hidden" name="MAX_FILE_SIZE" value="5000000" />
				<input type="file" name="file-fichier" id="file-fichier" required="required"/>
			</div>

			<div class="form-12-12">     
			    <label for="titre">Titre du fichier&nbsp;:</label>
			    <input type="text" name="file-titre" placeholder="Titre du fichier" value="" id="file-titre" /><br />
			</div>     

			<div class="form-12-12">     
			    <label for="description">Description&nbsp;:</label>
			    <textarea name="file-description" id="file-description"></textarea>
			</div>

			<input type="submit" name="submit" value="Envoyer" />

			<div class="form-12-12 file-form-info">
				<progress class="progressBar" value="0" max="100"></progress>
			</div>

		</fieldset>
	</form>

Le javascript qui envoi le form en ajax à l’aide du plugin jquery.form.js :

	var fileForm = $('#attach-file-form');
	$('#file-fichier').change(function() {
		var file = this.files[0];
		$('.file-form-info', fileForm).prepend(file.name)
	});

	fileForm.ajaxForm({
		uploadProgress: function(evt, position, total, complete) {
			var progress = $('progress', fileForm);
			progress.attr('max', complete);
		},
		success:    function(data) { 
			console.log(data);
			$('.file-form-info').html(data);
		}
	});

Et la bidouille php-txp pour l’upload de fichier (utilise un external_output, adi_gps et smd_query :

; Content-type: text/html
<txp:cbe_frontauth_if_logged>
	<txp:adi_gps />

	<txp:variable name="import" value="0" />

	<txp:php>	
		variable(array(
			'name' => 'filesize',
			'value' => $_FILES['file-fichier']['size']
		));
		variable(array(
			'name' => 'timestamp',
			'value' => time()
		));
		$infosfichier = pathinfo($_FILES['file-fichier']['name']); 
		variable(array(
			'name' => 'extension',
			'value' => $infosfichier['extension']
		));	
		variable(array(
			'name' => 'filename',
			'value' => $infosfichier['filename']
		));
	</txp:php>

	<txp:variable name="newFileName"><txp:variable name="file_id-projet" />_<txp:smd_wrap item='<txp:variable name="filename" />' transform="sanitize|url" />_<txp:variable name="timestamp" />.<txp:variable name="extension" /></txp:variable>

	<txp:php>
		$newfile = 'files/'.variable(array('name' => 'newFileName'));
		if(!empty($_FILES['file-fichier']['tmp_name']) AND is_uploaded_file($_FILES['file-fichier']['tmp_name']))
		{
			if(filesize($_FILES['file-fichier']['tmp_name'])<5000000)
			{
				//Copie le fichier dans le répertoire de destination
				if(move_uploaded_file($_FILES['file-fichier']['tmp_name'], $newfile))
				{
					variable(array(
						'name' => 'import',
						'value' => '1'
					));
				}
			}		
		}
	</txp:php>

	<txp:hide>Gestion des valeurs pour Insert sql </txp:hide>
	<txp:hide><!-- title --></txp:hide>
	<txp:if_variable name="file-titre" value="">
		<txp:variable name="file-titre">NULL</txp:variable>	
	<txp:else />
		<txp:variable name="file-titre">'<txp:smd_wrap item='<txp:variable name="file-titre" />' transform="fordb" />'</txp:variable>
	</txp:if_variable>
	<txp:hide><!-- description --></txp:hide>
	<txp:variable name="file-description">'<txp:smd_wrap item='<txp:variable name="file-description" />' transform="fordb" />'</txp:variable>

	<txp:hide><!-- If Upload OK --></txp:hide>
	<txp:if_variable name="import" value="1">
		<txp:smd_query query='INSERT INTO txp_file 
		 	(filename, title, description, status, modified, created, size, author) 
		VALUES
			 (''<txp:variable name="newFileName" />'', <txp:variable name="file-titre" />, <txp:variable name="file-description" />, 3, NOW(), NOW(), <txp:variable name="filesize" />, ''<txp:cbe_frontauth_whois type="name" />'');' 
		/>
		<p class="success">Fichier bien reçu sur le serveur. En attente de vérification…</p>

	</txp:if_variable>

	<txp:if_variable name="import" value="0">
		<p class="error">Erreur lors de l'importation du fichier. Vérifiez que votre fichier ne dépasse pas les 5Mo.</p>
	</txp:if_variable>

<txp:else />

	<txp:die />

</txp:cbe_frontauth_if_logged>

Ça marche. Ça envoie le fichier en statut ‘À valider’. J’ai encore une alerte mail à bidouiller ou alors mettre en place un flux rss pour alerter lorsqu’un nouveau fichier posté.

Voilà, vous pouvez pourrir mon code.

Offline

Board footer

Powered by FluxBB