Discussion :

[cid5420]

Bonjour,

J'ai suivi un tuto pour faire de l'upload par drag & drop.

Tous le code fonctionne à merveille en local avec wamp mais dès que je passe en ligne c'est pas la même !!!

Donc je développe sous codeigniter (je ne pense pas que ça soit important pour le problème).

Lorsque j'ouvre le debugger de chrome, je glisse mon image sur ma zone et là message d'erreur :

Uncaught SyntaxError: Unexpected token <

Donc je vais voir un peut plus loin, je regarde dans le XHR et là je voix une erreur : (Response)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div style="border:1px solid #990000;padding-left:20px;margin:0 0 10px 0;">
 
<h4>A PHP Error was encountered</h4>
 
<p>Severity: Notice</p>
<p>Message:  Undefined index: x-file-type</p>
<p>Filename: controllers/upload.php</p>
<p>Line Number: 24</p>
 
</div>{"error":"Format non support\u00e9"}

Lorsque je fais un console.log de file, j'ai:

File {webkitRelativePath: "", lastModified: 1410875544000, lastModifiedDate: Tue Sep 16 2014 15:52:24 GMT+0200 (Paris, Madrid (heure d’été)), name: "SMTOM.jpeg", type: "image/jpeg"…}lastModified: 1410875544000lastModifiedDate: Tue Sep 16 2014 15:52:24 GMT+0200 (Paris, Madrid (heure d’été))name: "SMTOM.jpeg"size: 158328type: "image/jpeg"webkitRelativePath: ""__proto__: File

Je remarque que webkitRelativePath est vide, je ne sais pas ce que c'est ! est-ce normal ?

Je mets mon code pour mieux comprendre
Controleur : upload

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
class Upload extends CI_Controller {
    function form()
    {
        $data['id'] = $this->uri->segment(3);
        $this->load->model('ct_model');
        $data['c'] = $this->ct_model->editClient($data['id']);
        $data['title'] = 'Logo';
        $this->load->view('admin/include/header');
        $this->load->view('admin/client/logo', $data);
    }
    public function do_upload() {
        header('content-type: application/json');
        //$h = getallheaders();
        $h = $_SERVER;
        $o = new stdClass();
        //RECUPERER LE FICHIER
        $source = file_get_contents('php://input');
        $types = Array('image/png', 'image/gif', 'image/jpeg', 'image/jpg');
        $folder = './img/logo/';
 
 
 
        if(!in_array($h['x-file-type'], $types)){
            $o->error = 'Format non supporté';
        }else {
            if(isset($h['x-param-value'])){
                unlink($folder.$h['x-param-value']);
            }
            //ECRIRE LE FICHIER
            file_put_contents('./img/logo/'.$h['x-file-name'], $source);
            $o->name = $h['x-file-name'];
            $o->content = '<div class="container imgload">
                                <img class="img-responsive" src="'.base_url().'img/logo/'.$h['x-file-name'].'"/>
                            </div>';
 
            $this->load->model('ct_model');
            $id = $this->uri->segment(3);
            $data= array(
                'Logo' => $h['x-file-name']
            );
            $this->ct_model->majClientLogo($id, $data);
        }
        echo json_encode($o);
    }
}

Vue : logo

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
    <div id="contenue" class="row contenue-tablaux">
        <h2 class="text-center"><?php echo $title;?></h2>
        <div class="block-upload">
            <?php $class = 'id="fileupload" class="form-horizontal"';?>
            <?php echo form_open('ct/do_upload', $class);?>
                <div class="row text-center">
                    <?php if($c->Logo != ''){?>
                        <div class="dropfile thumbnail" data-value="<?php echo $c->Logo;?>">
                            <img class="img-responsive" src="<?php echo base_url().'img/logo/'.$c->Logo;?>" alt="Logo <?php echo $c->Nom;?>"/>
                        </div>
                    <?php }else {?>
                        <div class="jumbotron dropfile"></div>
                    <?php } ?>
                    <a href="<?php echo site_url('ct/client_table');?>" class="btn btn-default">Retour</a>
                </div>
            <?php form_close();?>
        </div>
    </div><!-- Contenue -->
    <div class="footer">
        <div class="row footer">
            <div class="banner">
                <img class="img-responsive" src="<?php echo base_url();?>img/baniere.jpg" alt="Logo capecom"/>
            </div>
            <div class="footerInfo">
                <p>Siège social : 27 rue des Garennes 57155 MARLY     |     Tél. 03 87 63 56 73 - FAX 03 87 55 03 01     |     <a href="mailto:contact@capecom.fr">contact@capecom.fr</a></p>
                <p class="text-right">Capecom © 2015 -:: <a href="http://www.capecom.fr">http://www.capecom.fr</a> ::-</p>
            </div>
        </div><!-- row footer -->
    </div><!-- Container footer -->
    </div><!-- Container contenue -->
    <script src="<?php echo base_url();?>js/jquery.js"></script>
    <script src="<?php echo base_url();?>js/bootstrap.min.js"></script>
    <script src="<?php echo base_url();?>DataTables/media/js/jquery.js"></script>
    <script src="<?php echo base_url();?>DataTables/media/js/jquery.dataTables.js"></script>
    <script src="<?php echo base_url();?>DataTables/media/js/jquery.dataTables.min.js"></script>
    <script src="<?php echo base_url();?>js/jquery-ui.js"></script>
    <script src="<?php echo base_url();?>js/dropfile.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#table-utilisateurs').dataTable({
                "bPaginate" : false
            });
            $( "#datepicker" ).datepicker();
            $('.dropfile').dropfile({
                script : "<?php echo site_url('upload/do_upload/'.$id);?>",
                clone   : false
            });
        });
    </script>
</body>
</html>

et enfin mon fichier dropfile.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
(function($){
    var o = {
        message : 'Déposer le logo ici',
        script  : 'upload.php',
        clone   : true
    }
    $.fn.dropfile = function(oo){
        var replace = false;
        if(oo) $.extend(o,oo);
        this.each(function(){
            $('<span>').addClass('instructions').append(o.message).appendTo(this);
            $('<span>').addClass('progress').appendTo(this);
            $(this).bind({
                //ENTRER DANS LA ZONE
                dragenter : function (e) {
                    e.preventDefault();
                    //console.log('dragenter');
                },
                //SURVOLE DE ZONE
                dragover : function (e) {
                    e.preventDefault();
                    $(this).addClass('hover');
                    //console.log('dragover');
                },
                //QUITTE ZONE
                dragleave : function (e) {
                    e.preventDefault();
                    $(this).removeClass('hover');
                    //console.log('dragleave');
                }
            });
            this.addEventListener('drop', function(e){
                e.preventDefault();
                var files = e.dataTransfer.files;
                if($(this).data('value')){
                    replace = true;
                }
                upload(files,$(this), 0);
            }, false);
        });
        function upload(files, area, index){
            var file = files[index];
            if(index > 0 && o.clone){
                area = area.clone().html('').insertAfter(area).dropfile(o);
            }
            console.log(file);
            var xhr = new XMLHttpRequest();
            var progress = area.find('.progress');
            //evenements
            xhr.addEventListener('load', function(e){
                var json = jQuery.parseJSON(e.target.responseText);
                area.removeClass('hover');
                progress.css({height:0});
                if(index < files.length-1){
                    upload(files, area, index+1);
                }
                if(json.error){
                    alert(json.error);
                    return false;
                }
                if(o.clone && !replace && index == files.length -1){
                    area.clone().html('').insertAfter(area).dropfile(o);
                    area.data('value', null);
                }
                area.append(json.content);
                window.location.href = window.location.href;
            });
            xhr.upload.addEventListener('progress',function(e){
                if(e.lengthComputable){
                    var perc = Math.round((e.loaded/ e.total) * 100)+ '%';
                    progress.css({height:perc}).html(perc);
                }
            }, false)
            xhr.open('post', o.script, true);
            //console.log(file.type);
            xhr.setRequestHeader('content-type', 'multipart/form-data');
            xhr.setRequestHeader('x-file-type', file.type);
            xhr.setRequestHeader('x-file-size', file.size);
            xhr.setRequestHeader('x-file-name', file.name);
            for(var i in area.data()){
                if(typeof area.data(i) !== 'object'){
                    xhr.setRequestHeader('x-param-'+i, area.data(i));
                }
            }
            xhr.send(file);
        }
        return this;
    }
})(jQuery);

Donc est ce que cela peut venir d'un problème de config du serveur (1&1) ?

[cid5420]

Bon j'ai résolut mon problème !

[satolas]

Bon j'ai résolut mon problème !

...comment ?

[cid5420]

Salut,

désolé de ne pas avoir mis la solution, donc si tu a le problème uniquement sur un serveur distant, il faut bien regarder la structure :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
xhr.setRequestHeader('x-file-type', file.type);
xhr.setRequestHeader('x-file-size', file.size);
xhr.setRequestHeader('x-file-name', file.name);

moi j'ai été obligé de changer dans mon contrôleur ! car la structure dois changer en fonction du serveur je pense !